CSS3+jquery实现图片万花筒3D旋转动画特效
一 需求樣式：
二 代碼示意：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3圖片萬花筒3D旋轉動畫特效</title> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <style>*{padding: 0;margin: 0;}img{width:200px;height: 300px;}body{ background-color: #fff; }/* 動畫 沿著X軸傾斜-15deg，動畫沿著Y軸旋轉 */@keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}@-moz-keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}@-ms-keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}@-webkit-keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}/* 動畫加給了父盒子 */.box{ width:200px;height:300px;position:relative;margin:auto;margin-top:150px;transform-style:preserve-3d;transform:rotateX(-10deg);animation: fn 10s;animation-iteration-count: infinite;animation-timing-function: linear;position: relative}/* 鼠標滑過，停止旋轉*/.box:hover{animation-play-state: paused;}.box>div{width:200px;height:300px;position: absolute;left:0;top:0;} </style></head> <body> <div class="box"><!-- 圖片 --><div ><img src="img/1.png" ></div><div ><img src="img/2.png"></div><div ><img src="img/3.png"></div><div ><img src="img/4.png"></div><div><img src="img/5.png"></div><div ><img src="img/6.png"></div><div><img src="img/7.png"></div><div ><img src="img/8.png"></div><div><img src="img/9.png" ></div> </div> <script>$(function(){var imgL=$(".box div").size();console.log(imgL)var deg=360/(imgL-1);//注意這邊是遍歷，別忘記i$(".box div").each(function(i){$(this).css({// <!--translateZ 定義2d旋轉沿著z軸-->"transform":"rotateY("+i*deg+"deg) translateZ(275px)" });// <!--防止圖片被拖拽-->$(this).attr('ondragstart','return false');});}) </script> </div> </body> </html>三 知識點總結：
1.transform-style:preserve-3d;
transform-style: flat | preserve-3d其中flat值為默認值，表示所有子元素在2D平面呈現(xiàn)。preserve-3d表示所有子元素在3D空間中呈現(xiàn)。
也就是說，如果對一個元素設置了transform-style的值為flat，則該元素的所有子元素都將被平展到該元素的2D平面中進行呈現(xiàn)。沿著X軸或Y軸方向旋轉該元素將導致位于正或負Z軸位置的子元素顯示在該元素的平面上，而不是它的前面或者后面。如果對一個元素設置了transform-style的值為preserve-3d，它表示不執(zhí)行平展操作，他的所有子元素位于3D空間中。
transform-style屬性需要設置在父元素中，并且高于任何嵌套的變形元素。
2.translateZ（）
在Z軸上移動xx距離
3.常見的比較容易弄混的css樣式
（1）skew() 方法
通過 skew() 方法，元素翻轉給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)：
值 skew(30deg,20deg) 圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度。
（2）rotate（）方法
通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
值 rotate(30deg) 把元素順時針旋轉 30 度。
（3）translate() 方法
通過 translate() 方法，元素從其當前位置移動，根據(jù)給定的 left（x 坐標） 和 top（y 坐標） 位置參數(shù)：
值 translate(50px,100px) 把元素從左側移動 50 像素，從頂端移動 100 像素
總結
以上是生活随笔為你收集整理的CSS3+jquery实现图片万花筒3D旋转动画特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ks 曲线_ROC曲线与KS曲线的理解
- 下一篇： CSS 基本样式