所以，我有三個名為“point”的 div，在它里面 h1 帶有類“name”和文本。我正在嘗試在 h1 標簽上制作具有透視效果的 3d 效果。代碼：
.point {
width: 100%;
perspective: 200px;
perspective-origin: left;
}
.name {
width: 500px;
font-weight: bold;
font-size: 92px;
transition: 0.5s;
transform: rotateY(30deg);
transform-origin: left center;
}
.name:hover {
font-size: 105px;
}<div class="point">
<h1 class="name">ПУНКТ 1</h1>
</div>
<div class="point">
<h1 class="name">ПУНКТ 2</h1>
</div>
<div class="point">
<h1 class="name">ПУНКТ 3</h1>
</div>但是，在瀏覽器中它看起來像這樣：
每個新點都會使轉換中斷一點。你可以看到每個新元素都低一點或有不同的視角。但是每個點元素只有一個透視屬性。我怎樣才能解決這個問題？
uj5u.com熱心網友回復：
你需要把transform:rotateY在.name:hover而不是.name像這樣
.name{
width: 500px;
font-weight: bold;
font-size: 92px;
transition: transform 0.5s;
transform-origin: left center;
}
.name:hover {
transform: rotateY(30deg);
}
你可以保持.point班級不變。希望這有幫助。
uj5u.com熱心網友回復：
你需要移動變換：transform:rotateY(30deg);到.name:hover
uj5u.com熱心網友回復：
在 h1 .name 類中設定了一些邊距值。
.name {
width: 500px;
font-weight: bold;
font-size: 92px;
transition: 0.5s;
transform: rotateY(30deg);
transform-origin: left center;
margin: 0;
}
希望能幫助到你。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/398091.html
上一篇：有人可以告訴如何在導航欄中將單詞放在彼此相鄰的串列中嗎
下一篇：使懸停停留在從它出現的元素上