CSS3中的3D動畫實現(鐘擺、魔方)--實現代碼
阿新 • • 發佈：2018-08-10
等待 比例 需要 時間 span bottom translate abs ase
CSS3中的3D動畫實現(鐘擺、魔方)
CSS3的2D變形----傳統的transform變形效果
transform ： translate、scale、rotate、skew…
translate：平移、scale：縮放、rotate：旋轉、skew：傾斜
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform</title> <link rel="stylesheet" href="reset.css"> <style> .box{ margin: 20px auto; width: 200px; height: 200px; background: url("img/zf_cube1.png") no-repeat; background-size: 100% 100%; transform: translateX(100px) translateY(200px) rotate(45deg) scale(1.5); /*rotate(30deg):默認就是沿著垂直於屏幕方向的軸旋轉的 rotateX：沿著X軸旋轉 rotateY：沿著Y軸旋轉 */ } </style> </head> <body> <div class="box"></div> </body> </html>
CSS3的2D變形----實現鐘擺效果(animation幀動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clock</title> <link rel="stylesheet" href="reset.css"> <style> .clockBox{ position: absolute; top:50%; left:50%; margin:-150px 0 0 -60px; width: 120px; height: 300px; background: url("img/clock.png") no-repeat; background-size: 100% 100%; } .clockBox{ transform-origin: center top 0; transform: rotate(-45deg); animation:clockMove 1s linear infinite both; /* * animation-name：運動軌跡的名稱（@keyframes設置運動軌跡） * animation-duration：完成動畫需要的總時間 * animation-timing-function：運動方式，默認值ease非勻速，linear勻速，ease-in加速，ease-out減速... * animation-delay：延遲時間，默認時0s代表立即執行 * animation-iteration-count：動畫執行的次數，默認是1代表執行一次就結束了，infinite是無限次運動 * animation-fill-mode：設置動畫的狀態 * none默認值：無任何特殊狀態設置 * forwards：動畫完成後會停留在最後一幀的位置，（默認動畫執行完成會回退到起始位置） * backwards：只有在動畫有延遲時間的時候才有用，當動畫在延遲時間內，讓運動的元素在運動軌跡的第一幀位置等待 * both：同時具備以上兩個效果 */ } @keyframes clockMove { from,to{ transform: rotate(45deg); } 50%{ transform: rotate(-45deg); } } </style> </head> <body> <div class="clockBox"></div> </body> </html>
CSS3的3D變形----實現3D變形效果的步驟和原理
perspective：定義3D元素距視圖的距離
none默認值，與設置零相同，不設置透視
number 設置的具體指（單位px）
認知3D空間軸和3D變形效果
translate（X|Y|Z） rotate（X|Y|Z）......
transform-style:preserve-3d在3D空間中呈現被嵌套的元素
transform-origin：設置旋轉的幾點位置
X軸：left center right length %
Y軸：top center bottom length %
Z軸：length
CSS3的3D變形----搭建3D魔方讓其自動360度旋轉
cube.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet/less" href="css/cube.less"> <script src="js/less.min.js"></script> </head> <body> <div class="main"> <ul class="cubeBox"> <li><img src="img/zf_cube1.png" alt=""></li> <li><img src="img/zf_cube2.png" alt=""></li> <li><img src="img/zf_cube3.png" alt=""></li> <li><img src="img/zf_cube4.png" alt=""></li> <li><img src="img/zf_cube5.png" alt=""></li> <li><img src="img/zf_cube6.png" alt=""></li> </ul> </div> </body> </html>
cube.less
@import "reset.css"; html, body { height: 100%; overflow: hidden; } .main { position: absolute; top: 50%; left: 50%; margin: -284px 0 0 -160px; width: 320px; height: 568px; background: url("../img/zf_cubeBg.jpg") no-repeat; background-size: cover; /*以背景圖最適合的比例鋪滿整個屏幕：以後項目中凡是大容器或者整個頁面的背景圖大小最好都這樣設置*/ } .cubeBox { @v: 255; position: absolute; top: 50%; left: 50%; margin: -(unit(255/2,px)) 0 0 -(unit(255/2,px)); width: 255px; height: 255px; li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; img { display: block; width: 100%; height: 100%; } } } /*--實現魔方--*/ @v-1: unit(255/2, px); @v-2: unit(-255/2, px); .main { perspective: 2000px; .cubeBox { transform-style: preserve-3d; //=為了可以看見效果，給魔方一個初始的旋轉角度 transform: scale(0.6) rotateX(-30deg) rotateY(45deg); //=>自動360deg旋轉 animation:cubeMove 5s linear infinite both; li { //=>正反面 &:nth-child(1) { transform: translateZ(@v-1); } &:nth-child(2) { transform: translateZ(@v-2) rotateY(180deg); } //=>左右面 &:nth-child(3) { transform: translateX(@v-2) rotateY(-90deg); } &:nth-child(4) { transform: translateX(@v-1) rotateY(90deg); } //=>上下面 &:nth-child(5) { transform: translateY(@v-2) rotateX(90deg); } &:nth-child(6) { transform: translateY(@v-1) rotateX(-90deg); } } } } @keyframes cubeMove { 0%{ transform: translate(50px) scale(0.6) rotateY(30deg); } 25%{ transform: translate(100px) scale(0.6) rotateY(270deg); } 50%{ transform: translate(-50px) scale(0.6) rotateY(0deg); } 75%{ transform: translate(100px) scale(0.6) rotateX(180deg); } 100%{ transform: translate(50px) scale(0.6) rotateZ(120deg); } }
CSS3中的3D動畫實現(鐘擺、魔方)--實現代碼