簡單css實現3d動畫效果
阿新 • • 發佈：2018-12-11
知識儲備
-
transition: transform 10s; 過度的變形時間為10s transform-style: preserve-3d; 變形的樣式是3d變化
-
relative和absolute：相對定位和絕對定位 relative相對於原來文字框進行定位，定位後原來的空間不刪除； absolute相對於整個頁面進行定位，定位後原來的空間刪除。
-
:nth-of-type(n) 選擇器匹配屬於父元素的特定型別的第 N 個子元素的每個元素. n 可以是數字、關鍵詞或公式。
-
rotateX() 方法 通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。
-
translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。
實現效果 讓四張圖片進行空間旋轉，實現3d的動畫效果。
程式程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #block{ position: relative; width: 300px; height: 300px; margin:200px; transform-style:preserve-3d; transition: transform 10s; } #block img{ position: absolute; left: 0px; top: 0px; } img:nth-of-type(1){ transform: rotateX(0deg) translateZ(100px); } img:nth-of-type(2){ transform: rotateX(-90deg) translateZ(100px); } img:nth-of-type(3){ transform: rotateX(-180deg) translateZ(100px); } img:nth-of-type(4){ transform: rotateX(-270deg) translateZ(100px); } div:hover{ transform: rotateX(360deg); } </style> </head> <body> <div id="block"> <img src="../img/u=1877749382,1683878277&fm=111&gp=0.jpg" /> <img src="../img/複製1 u=1877749382,1683878277&fm=111&gp=0.jpg" /> <img src="../img/複製2 u=1877749382,1683878277&fm=111&gp=0.jpg" /> <img src="../img/複製3 u=1877749382,1683878277&fm=111&gp=0.jpg" /> </div> </body> </html>
學習就是為了滿足內心深處最基本的渴望，為我們平淡無奇的生活增加一絲樂趣。