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>
CSS3_3D 变换
原文地址：https://www.cnblogs.com/tianxiaxuange/p/9953849.html