代碼可直接復制使用看效果
這個文章參考了Lazy.Cat的文章:https://www.cnblogs.com/Lazy-Cat/p/9750244.html,大家也可以去看看,他講的還是比較詳細的。
我也覺得先來效果比較吸引人啊












這里就先記錄一些比較關鍵的知識點,方便大家理解
1.transform:transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。我們使用其rotateX,rotateY,translateZ來進行轉動
2.transition:用於設置過渡屬性
transition: all .4s;//所有過程完成時間為.4s
3.animation使用簡寫屬性,將動畫與 div 元素綁定
4.keyframes:從xx到xx狀態
@keyframes animationname {keyframes-selector {css-styles;}} @keyframes 動畫名 { from{ 初始狀態 }to{ 末態 } }
我們來看看其是怎么構成一個正方形的
/*外層正方形*/ .set .out_front { /*繞Y軸轉動0度,向屏幕外偏移,離觀察者近100px*/ transform: rotateY(0deg) translateZ(100px); } .set .out_back { /*繞Y軸轉動0度,向屏幕內移動,離觀察者遠離100px*/ transform: rotateY(0deg) translateZ(-100px) ; } .set .out_left { /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞Y軸轉動-90度,形成左面*/ transform: rotateY(-90deg) translateZ(100px); } /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞Y軸轉動90度,形成右面*/ .set .out_right { transform: rotateY(90deg) translateZ(100px); } /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞X軸轉動90度,形成頂面*/ .set .out_top { transform: rotateX(90deg) translateZ(100px); } /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞X軸轉動-90度,形成底面*/ .set .out_bottom { transform: rotateX(-90deg) translateZ(100px); }
如果想要看單個圖片的轉動,可以到w3school上去體驗一下,下面附上該部分鏈接
http://www.w3school.com.cn/cssref/pr_transform.asp
完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D旋轉方塊畫冊</title> <style type="text/css"> /*外層容器樣式*/ .wrap{ margin: 220px; position: relative; } /*立方體效果*/ .set{ width: 50px; height: 50px; margin: 0 auto; transform-style: preserve-3d; /*設置動畫播放樣式:動畫對象rotate 播放速度曲線從頭到尾相同 時間20s 播放次數無限次*/ animation: rotate linear 20s infinite; } /*動畫的旋轉方式,先設定總體的*/ /*兼容*/ /*firefox*/ @-moz-keyframes rotate{ from{ transform: rotateX(0deg) rotateY(0deg); }to{ transform: rotateX(360deg) rotateY(360deg); } } /*sofari chrome*/ @-webkit-keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } /*opera*/ @-o-keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } /*設置單個圖片的樣式*/ .set div{ position: absolute; width: 200px; height: 200px; opacity: 0.8; /*持續時間為4s*/ transition: all .4s; } .pic { width: 200px; height: 200px; } .set .out_front { /*繞Y軸轉動0度,向屏幕外偏移,離觀察者近100px*/ transform: rotateY(0deg) translateZ(100px); } .set .out_back { /*繞Y軸轉動0度,向屏幕內移動,離觀察者遠離100px*/ transform: rotateY(0deg) translateZ(-100px) ; } .set .out_left { /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞Y軸轉動-90度,形成左面*/ transform: rotateY(-90deg) translateZ(100px); } /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞Y軸轉動90度,形成右面*/ .set .out_right { transform: rotateY(90deg) translateZ(100px); } /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞X軸轉動90度,形成頂面*/ .set .out_top { transform: rotateX(90deg) translateZ(100px); } /*向屏幕外移動,離觀察者遠離100px,與正前方圖片重疊,再繞X軸轉動-90度,形成底面*/ .set .out_bottom { transform: rotateX(-90deg) translateZ(100px); } /*定義小正方體樣式*/ .set span { display: block; width: 100px; height: 100px; position: absolute; top: 50px; left: 50px; } .set .s_pic { width: 100px; height: 100px; } .set .in_front { transform: rotateY(0deg) translateZ(50px); } .set .in_back { transform: translateZ(-50px) rotateY(180deg); } .set .in_left { transform: rotateY(-90deg) translateZ(50px); } .set .in_right { transform: rotateY(90deg) translateZ(50px); } .set .in_top { transform: rotateX(90deg) translateZ(50px); } .set .in_bottom { transform: rotateX(-90deg) translateZ(50px); } /*鼠標移入后樣式*/ /**/ .set:hover .out_front { transform: rotateY(0deg) translateZ(200px); } .set:hover .out_back { transform: translateZ(-200px) rotateY(0deg); } .set:hover .out_left { transform: rotateY(-90deg) translateZ(200px); } .set:hover .out_right { transform: rotateY(90deg) translateZ(200px); } .set:hover .out_top { transform: rotateX(90deg) translateZ(200px); } .set:hover .out_bottom { transform: rotateX(-90deg) translateZ(200px); } </style> </head> <body> <!--創造一個獨立的空間給我們的方塊--> <div class="wrap"> <!--建立一個div,設置共同的動畫樣式,統一協調--> <div class="set"> <!--設置外層的方塊的六個面--> <!--前--> <div class="out_front"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b79f246.jpg"></div> <!--后--> <div class="out_back"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b79f613.jpg"></div> <!--左--> <div class="out_left"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1ae5.jpg"></div> <!--右--> <div class="out_right"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c19c8.jpg"></div> <!--上--> <div class="out_top"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1b1f.jpg"></div> <!--下--> <div class="out_bottom"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1b1f.jpg"></div> <!--設置內層的方塊的六個面,這里包裹img標簽使用span是為了之后設置樣式時便於區分--> <!--前--> <span class="in_front"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943c912e.jpg"></span> <!--后--> <span class="in_back"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943e4a11.jpg"></span> <!--左--> <span class="in_left"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943e5482.jpg"></span> <!--右--> <span class="in_right"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e94411992.jpg"></span> <!--上--> <span class="in_top"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e94412ee7.jpg"></span> <!--下--> <span class="in_bottom"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e9441387d.jpg"></span> </div> </div> </body> </html>
這個代碼是重新更新了一下的,因為我這里用的圖片在測試時是好好的,放到博客上來就大小不一,我就改了一下圖片的大小
學習了之后還可以根據這些原理設計出其他有趣的東西