css3简易魔方绘制

立方体绘制

3D变化的坐标如下所示：

网格所在的面代表我们的设备屏幕（大多情况下为电脑屏幕）

transform

浏览器支持情况:
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 需要前缀 -ms-。

旋转测试：

正常情况

transform: rotateX(Xdeg);[以X为轴进行旋转]

transform: rotateY(Xdeg);[以Y为轴进行旋转]

transform: rotateZ(Xdeg);[以Z为轴进行旋转]

---

偏移测试：

translateX

translateY

---

注：这里将父容器宽高设为与子容器一样（若有边框需要考虑边框的大小）

注：示例并未做兼容处理
1 前后两个面经Z轴偏移，前为正（向屏幕外，用户的方向偏移），后为负得到
2 左右两个面经旋转偏移得到

同时设置旋转和偏移时，属性的顺序会影响最终的效果

立方体效果（添加了旋转动画）

<div class="square-wrapper"> <div class="front"></div> <div class="behind"></div> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> </div>

.square-wrapper, .square-wrapper > div{ position: absolute; width: 100px; height: 100px; } /*立体实现*/ .square-wrapper{ margin-top: 20px; transform-style: preserve-3d; animation: square-animation 5s infinite; } @keyframes square-animation{ 0% {transform: rotateX(0deg) rotateY(0deg);} 45% {transform: rotateX(90deg)} 75% {transform: rotateY(90deg);} 90% {transform: rotateX(45deg) rotateY(45deg);} 100% {transform: rotateX(0deg) rotateY(0deg);} } .square-wrap .top{ background-color: red; transform: translateY(-50px) rotateX(90deg); } .square-wrap .bottom { background-color: brown; transform: translateY(50px) rotateX(-90deg); } .square-wrap .left{ background-color: green; transform:translateX(-50px) rotateY(90deg); } .square-wrap .right{ background-color: blue; transform: translateX(50px) rotateY(-90deg); } .square-wrap .front{ background-color: #ddd; transform: translateZ(50px); } .square-wrap .behind{ background-color: #000000; transform: translateZ(-50px); } 原文链接：

http://yangxiaofu.com/2015/11/11/css3简易魔方绘制/