前言
相拥的树，从最微小的木粒诞生；九层平台是从疲惫的土壤中诞生的。
当我们遇到困难的问题时，我们可以将其一步步分解，转化为熟悉的内容，问题就可以轻松解决。
我们现在的目标是制作一个具有3D效果的魔方。我们是否找到了它的本质并解构了它？那先写一个立方体吧！
3D 相关 CSS 属性及函数
3D 空间中最重要的变换是平移、旋转和缩放。接下来，我们将介绍与制作3D效果立方体相关的CSS属性和功能。
transform-styleperspectivebackface-visibility
3D 空间
立方体必须存在于3D 空间中。首先，您需要使用CSS 来指示立方体位于3D 空间中。
.cube{transform-style:preserve-3d;} 通过CSS属性值transform-style:preserve-3d，可以设置该元素的所有子元素处于3D空间。
在科幻小说《三体》中，云天明讲述了三个故事，其中一个故事讲述了一位深水王子。无论远看还是近看，他的高度都是一样的，不会受到距离增减的影响。我们现实中的“大近、小远”的透视规律。
正是有了透视距离，现实世界中的事物才有了层次感，而在CSS 的3D 世界中，也有一个代表透视距离的属性。
.cube{perspective:800px;//观察者眼睛从上面看的完整视角-origin:150%-150%;} 与二维平面不同的是，3D空间中多了一个Z轴，与垂直于Z轴构成的Z平面就是我们在2D方向上看到的平面。
透视定义了观察者的眼睛与Z=0 平面（即投影平面）之间的距离，以创建空间感。
最小视角可以设置为1px。值越小，投影表面上的物体越大。如下图
perspective-origin 表示观察者眼睛的位置，默认居中
平移与坐标系： translate3d()
.cube{transform:translate3d(x,y,z);}translate3d(x, y, z) 定义元素在3D 空间中沿坐标系的平移。如果仅在单轴上平移，则可以使用独立的API。
translateX(x): translate3d(x, 0, 0)translateY(y): translate3d(0, y, 0)translateZ(z): translate3d(0, 0, z) 沿Z 轴方向平移时，为正值value代表离用户越近，也就是视觉上会越来越大。负值则相反。具体视觉效果请参考MDN文档。
它们在三维坐标系中的正方向之一如下：
翻译Z | MDN[1]
旋转与原点： rotate3d() 与 transform-origin
.cube{transform:rotate3d(x,y,z,a);}rotate3d 定义元素在3D 空间中的旋转。与平移相比，旋转多了一个指标：“旋转轴，即从原点出发的向量[x,y,z]来确定旋转轴”。
[x, y, z]坐标自然是通过rotate3d(x, y, z, a)指定的，那么如何确定原点呢？
原点坐标由属性transform-origin指定。如果只有前两个值在2D平面中表示，如果有三个值，则在3D空间中表示。
您可以通过绕每个轴旋转180 度来确定原点坐标
.cube{transform-origin:100px100px100px;}通过旋转立方体可以对rotate3d有一个直观的认识
正常放置
正常情况下，每一面的数字如下
rotateX(180deg)
沿X轴旋转180度后，平面2面向用户
rotateZ(180deg)
沿Z轴旋转180度后，平面1面向用户，但方向相反
您还可以通过MDN文档对每个转换有更直观的了解。
旋转X | MDN[2]旋转Y | MDN[3]旋转Z | MDN[4]变换起源| MDN[5]
一个立方体
熟悉CSS 3D 属性和值后，您可以轻松绘制立方体。
立方体由六个面组成，分别用上、下、左、右、前、后的第一个字母表示。用html描述其结构如下
divclass='cube-container'divclass='cube'divclass='faceface-up'U/divdivclass='faceface-down'D/divdivclass='faceface-left'L/divdivclass='faceface-right'R/divdivclass='faceface-front'F/divdivclass='faceface-back'B/div/div/div.cube-container: 为立方体提供布局，使其位于屏幕的中心。cube: 代表立方体容器。face: 代表立方体的六个元素为立方体提供一个100px/100px 大小的容器并将其放置在屏幕中央，立方体每一侧的文字也垂直居中。
nbsp;width:100px;cube-container{display:flex;justify-content:center;align-items:center;height:500px;}.cube{width:$width;height:$width;margin:$width;}.face{background: #f60;display:flex;调整内容：center ;align-items:center;font-size:2em;color:#fff;} 接下来，对六个面进行绝对定位，并根据目标位置进行适当的平移和旋转，形成一个立方体。
$width: 100px;face { width: $width;高度： $宽度；绝对位置：face-up { 变换： 旋转X(90deg) 平移Z($width/2); } .face-down {transform: 旋转X（-90度）translateZ（$宽度/2）; } .face-left { transform: 旋转Y(-90deg) 平移Z($width/2); } .face-right {transform: 旋转Y（90度）翻译Z（$宽度/2）; } .face-front {transform: translateZ($width/2); } .face-back {transform: 旋转X(180deg) 平移Z($width/2); }}效果如下
全部代码如下
代码笔[6]
让立方体动起来
至此，3D空间中的立方体已经形成。为了让它更加生动，我决定给它一个动画。
下面的CSS 动画让它永远围绕矢量[1, 1, 0] 旋转。
@keyframesrotate{0%{transform:rotate3d(0,0,0,0);}100%{transform:rotate3d(1,1,0,360deg);}}.cube{animation:rotate2slinearreverseinfinite;}渲染如下图
来画一个魔方
魔方由27个小块组成。用translate3d置换这27个小立方体，就可以得到魔方。代码如下
mixin 坐标() { @for $x 从1 到3 { @for $y 从1 到3 { @for $z 从1 到3 { .cube-#{$x}-#{$y}-#{$ z} {transform: translate3d(($x - 2) * $width, ($y - 2) * $width, ($z - 2) * $width); } } } }}@include 坐标();
本文采摘于网络，不代表本站立场，转载联系作者并注明出处：https://www.iotsj.com//kuaixun/4500.html
用户评论
哇哦，居然可以用CSS3实现3D魔方！感觉好酷炫，我要去试试看！
有15位网友表示赞同！
这个教程太赞了！终于可以自己用CSS3做出3D魔方了，一直想尝试这个效果！
有10位网友表示赞同！
太神奇了！没想到CSS3可以做出这么逼真的3D魔方，以前一直以为只能用js实现。
有17位网友表示赞同！
收藏了！以后要做网站的时候可以考虑用这个效果，肯定会很吸引人！
有12位网友表示赞同！
CSS3实现3D魔方？这也太厉害了，我得好好学习一下！
有19位网友表示赞同！
感谢分享！看了你的教程，我终于明白CSS3怎么实现3D魔方了，原来并不难！
有12位网友表示赞同！
这个教程太详细了，一步一步的讲解，新手也能轻松上手！
有17位网友表示赞同！
这篇文章太有帮助了！我之前一直卡在旋转效果上，现在终于解决了！
有20位网友表示赞同！
学习了！原来3D魔方可以这么简单地实现，我要去尝试做一个自己的魔方！
有14位网友表示赞同！
太棒了！现在终于可以自己做出酷炫的3D魔方网页了，感觉自己离前端大神又近了一步！
有9位网友表示赞同！
CSS3还能做出3D魔方？真是太不可思议了！看来我还有很多东西要学！
有7位网友表示赞同！
收藏了，等我有时间一定要试试！
有19位网友表示赞同！
学习了！感觉CSS3真是强大，可以实现很多炫酷的效果！
有7位网友表示赞同！
这个教程太精彩了！我以前一直以为3D魔方只能用JS实现，现在终于知道可以用CSS3了！
有12位网友表示赞同！
看了你的教程，我终于明白CSS3怎么实现3D魔方了，原来并不复杂！
有19位网友表示赞同！
太赞了！以后可以做出更酷炫的网页了！
有11位网友表示赞同！
感谢分享！
有12位网友表示赞同！
收藏了！
有6位网友表示赞同！
太厉害了！
有18位网友表示赞同！
我要去试试看！
有16位网友表示赞同！