我想修復圖像上的文字,這樣如果我的圖像移動或翻轉,我的文字也會隨文字移動或翻轉。我怎樣才能做到這一點 ?我只想讓我的文字與圖像動畫一起表現。例如:如果我的圖像翻轉,它上面的文字也應該翻轉。 如果我的圖像彈出,那麼文本也應該彈出 如果我的圖像移動,那麼文本也隨之出現。如何修復圖像上的文字,使其可以隨文字移動?
總的來說,我只是想修復圖像上的文字。
感謝
我想修復圖像上的文字,這樣如果我的圖像移動或翻轉,我的文字也會隨文字移動或翻轉。我怎樣才能做到這一點 ?我只想讓我的文字與圖像動畫一起表現。例如:如果我的圖像翻轉,它上面的文字也應該翻轉。 如果我的圖像彈出,那麼文本也應該彈出 如果我的圖像移動,那麼文本也隨之出現。如何修復圖像上的文字,使其可以隨文字移動?
總的來說,我只是想修復圖像上的文字。
感謝
.flip {
width: 300px;
height: 500px;
perspective: 1000px;
}
.flip_box {
width: 300px;
height: 500px;
position: relative;
transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d
}
.front, .back {
position: absolute;
width: 300px;
height: 500px;
top: 0px;
left: 0px;
border: 1px solid #666;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
color: red;
font-size: 16px;
}
.back {
color: blue;
font-size: 18px;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.flip:hover .flip_box {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
<div class="flip">
<div class="flip_box">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</div>
您可以創建一個小提琴 –
@ManojKadolkar不建議小提琴。 SO有一個很好的代碼片段。他應該使用它。編碼器分享您的相關代碼,否則我們不能幫助您,您的問題將被關閉 –