3D 变换
在 2D 父元素中,效果需要想象
-
#ele_3d {
width: transform: rotateX(2deg); } -
rotateX 为正,元素左上角往里跑。。。对象在 x 轴上的旋转角度,正方向向右
-
rotateY 为正,元素左上角往外跑。。。对象在 x 轴上的旋转角度,正方向向上
-
rotateZ 为正,元素在视觉上顺时针旋转。。。对象在 z 轴上的旋转角度,正方向向屏幕外
给父元素设置 transform-style: preserve-3d; 开启 3D 空间
-
#box_3d { width: 300px; height: 300px; background-color: #f006; /* 开启 3D 空间 */ transform-style: preserve-3d; /* 实现近大远小 : 景深 */ perspective: 300; }
-
- 景深中心点 perspective-origin: 50% 50%; (视锥顶点)
- perspective 的值越大,元素的效果越接近于 2D 变换的效果。
- translateZ(300px)
- 往景深里走,元素会越来越小
- 参数大于等于 0(不能为负)
- scaleZ(2); // 会使元素的厚度变成 2 ,默认为 1。。。到 scaleZ(0); 时元素消失
- 给父元素设置景深
- transform: perspective(300px);
- 给子元素设置景深
- transform: perspectiv(300px) translate(-200px);
- 综合变换
- 变换基点 transform-origin: 50% 50% 0; ____几何元素最中心为 xyz点:
- transform-origin: top;
- transform-origin: left;
- transform-origin: right;
- transform-origin: bottom;
- transform-origin: 100px 100px 0; /* 变换基点的 z 只能使用具体数值 */
- transform-origin: top left;
- transform-origin: bottom right;
3D 旋转盒子
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>3D 旋转盒子</title> <style type="text/css"> body { width: 100%; color: #000; background: #96b377; font: 14px Helvetica, Arial, sans-serif; padding: 600px; } /**** CSS3 3D 盒子****/ #six_3d_box { position: relative; width: 600px; height: 600px; transform-style: preserve-3d; /* 开启 父元素 3D 空间 */ transform-origin: 50% 50% -300px; list-style: none; } #six_3d_box li { position: absolute; width: 600px; height: 600px; line-height: 600px; text-align: center; } #six_3d_box li.one { top: 0px; left: 0px; background-color: #ddd3; } #six_3d_box li.two { top: -600px; left: 0px; transform-origin: 50% 100% 0; transform: rotateX(90deg); background-color: #ccc3; } #six_3d_box li.three { top: 0px; left: 600px; transform-origin: 0 50% 0; transform: rotateY(90deg); background-color: #eee3; } #six_3d_box li.four { top: 0px; left: -600px; transform-origin: 100% 50% 0; transform: rotateY(-90deg); background-color: #cfe3; } #six_3d_box li.five { top: 600px; left: 0px; transform-origin: 50% 0 0; transform: rotateX(-90deg); background-color: #efc3; } #six_3d_box li.six { top: 0px; left: 0px; transform: translateZ(-600px) rotateY(180deg); /* 沉底 翻一面 */ background-color: #afa3; } </style> </head> <body> <ul id="six_3d_box"> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> <li class="five">5</li> <li class="six">6</li> </ul> <!-- javascript 代码 --> <script type="text/javascript"> var theBox = document.getElementById("six_3d_box"); var boxX = 0; var boxY = 0; var isRight = true; window.setInterval(function(){ if(isRight){ boxX++; boxY++; }else{ boxX--; boxY--; }; if(Math.abs(boxX) >= 360 || Math.abs(boxY) >= 360){ isRight = !isRight; }; theBox.style.transform = "rotateX("+boxX+"deg) rotateY("+boxY+"deg)"; },30); </script> </body> </html>