CSS3沿Y軸旋轉動畫是一種帶有3D效果的動畫,通過使用CSS3中的transform屬性和動畫關鍵幀(@keyframes)來實現沿Y軸旋轉的效果。下面我們來一步步學習如何實現這個效果。
/* 定義動畫關鍵幀 */ @keyframes rotateY{ 0% { transform: perspective(200px) rotateY(0deg); } 100% { transform: perspective(200px) rotateY(180deg); } } /* 定義旋轉效果 */ .rotateY{ animation: rotateY 2s ease-in-out infinite; }
以上代碼中,我們首先定義了一個動畫關鍵幀rotateY,其中0%狀態和100%狀態分別定義了開始和結束時的動畫效果。具體地,我們使用了CSS3的perspective屬性來設置一定的透視距離,讓旋轉效果顯得更有3D感。接著我們使用rotateY()函數來定義繞Y軸旋轉的角度,初始角度為0deg,結束角度為180deg。
接下來,我們定義了一個.rotateY的類,將它的animation屬性設置為rotateY動畫,動畫持續時間為2s,動畫速度為ease-in-out,無限循環。
要使用這個動畫,只需要將.rotateY類應用到需要實現旋轉效果的HTML元素上即可。例如:
我會沿Y軸旋轉
這樣,就可以在瀏覽器中看到帶有旋轉效果的文本了。