作者：首席填孔官?苏楠公众号：honeyBadger8，群：912594095，本文为原创，版权归作者所有，转载请注明原文链接和出处。前言 最近在写《每周动画点点系列》文章。上一期分享了<教你画跑车>。本期为大家带来一个用CSS3绘制的三维3D魔方。结合js制作想转就转，这里是@IT·平头哥联盟，我是首席填坑官?苏楠（南·苏），先看看效果，再破解下其实施过程。绘制过程： 好吧，gif看起来有点不清楚。想要在线预览的同学可以点击OnlinePreview?，话不多说，我们先来分析一下，看看这个功能是如何实现的。?API预热：这个例子是一个三维正方形。既然有立体效果，那么CSS3中就必须有-webkit-perspective-透视和preserve-3d-三维空间。这两个是重点，当然还有transform-Origin,transition,transform等。我们先来回说说API是怎样的：perspectivevalue:none:不指定透视；length：指定观察者与“z=0”平面的距离，使具有三维位置变换的元素产生透视效果。“z>0”的三维元素大于normal，当“z<0”小于normal时，大小由该属性值决定，不允许负值。transform-stylevalue:flat：指定子元素位于元素的平面内；preserve-3d：指定子元素定位在三维空间中，当属性值为preserve-3d时，该元素将创建一个局部堆叠上下文；summary:判断一个变形后的元素是出现在三维空间还是平面，元素的父元素需要定义<'transform-style'>属性。也就是说，如果一个元素想要有立体的效果，它的parent需要设置有preserve-3d。transform-originvalue:percentage:以百分比指定坐标值。它可以是负值；length：使用长度值指定坐标值。可以是负值；left：指定原点的横坐标为左；center①：指定原点横坐标为中心；右：指定原点的横坐标为右；top：指定原点的纵坐标为top；center②：指定原点的横坐标，纵坐标为center；bottom：指定原点的垂直坐标为bottom；transform、transition等，不再介绍/*perspective使用示例：*/div{-webkit-perspective:600px;perspective:600px;}/*transform-样式用法示例：*/.preserve{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}/*transform-origin用法示例：*/.preserve{-webkit-transform-origin:50%50%-100px;或-webkit-transform-origin:bottom;或-webkit-transform-origin:top;………}?画6个面：是的，我没记错，6个面：上、前、下、后、左、右，上面的API说了这么多，我们试试看，写6个div，结构大概是这样，也是下一个魔方需要的结构：
