当前位置：首页 > Web前端 > CSS

玩转CSS3D——四面体与六面体

时间：2023-03-30 18:06:55 CSS

了解了CSS3D的原理之后，废话不多说，来画正多面体吧！只要能画出正多面体，基本上在CSS3D领域，对我们来说大概没什么难的。先看百度百科对正多面体的介绍：“多面体，即柏拉图立体，是指面全等，且每个顶点相连的面数相同的正多边形”。简单的说，它是一个非常对称的立方体，每个面都是由正多边形组成的，所以在这篇文章中，我们将绘制一个正四面体和一个正六面体。要为正六面体画正多面体，第一个必须画正六面体。为什么？因为正六面体就是我们熟悉的正立方体，夹角都是90度。也是最容易理解的形状（虽然写的有些错误，但好像是画出来的。。。）首先我们需要在空格里放六个方块，分别标识box1到box6的类别名称，并写入1~6，判断翻盖是否朝外（如果朝内，则文字反转）。1

2

3

4

56然后为摄像机、空间和这些框进行基本的CSS定义。记住盒子的位置一定要设置成absolute，这样才不会相互挤压。.camera{宽度：200px;高度：200px；透视原点：中心中心；-moz-perspective-origin:centercenter;-webkit-perspective-origin:centercenter;视角：500px；webkit-perspective:500px;}.space{position:relative;宽度：100%；高度：100%；边框：1px虚线#000；变换样式：保留3d；-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}.spacediv{position:absolute;宽度：100px；高度：100px；字体大小：50px；文本对齐：居中；line-height:100px;}我们看box1，box1最简单，移到空格中间即可。.box1{背景：rgba(255,0,0,.2);transform:translateX(50px)translateY(50px);}box2除了要向中间移动外还必须旋转90度，所以transform-origin是必须的属性，可以设置物体在移动时以自己的点为准进行更改，并设置不同的位置。旋转90度后，它将处于不同的位置。这里我们先把box2水平平移150px，然后改变X的位置在左边，旋转后就可以平滑的连接到box1上了。.box2{背景：rgba(255,255,0,.2);变换原点：左上；transform:translateX(150px)translateY(50px)rotateY(90deg);}box3正好和box1相对，所以旋转180度就可以了，但是很重要的是旋转后整个Z轴也要旋转180度。为避免混淆，先将box3向Z轴后方移动100px，旋转后就正常了。.box3{背景：rgba(0,255,0,.2);transform:translateX(50px)translateY(50px)translateZ(-100px)rotateY(180deg);}box4和box2类似，但是旋转的中心要移到右边，也是因为移到了右边，所以我们需要先进行X位移。.box4{背景：rgba(255,0,255,.2);变换原点：右上角；transform:translateX(-50px)translateY(50px)rotateY(-90deg);}box5在最上面，box6在最下面，用heelbox1到box4同样的方法，不过这次是围绕X旋转轴。.box5{背景：rgba(0,0,255,.2);变换原点：中心底部；transform:translateX(50px)translateY(-50px)rotateX(90deg);}.box6{background:rgba(0,255,255,.2);变换原点：中心顶部；transform:translateX(50px)translateY(150px)rotateX(-90deg);}完成后，你应该能顺利看到一个正六面体。这时候，我们可以改变相机的视角，让它更清晰。我们可以在空间中应用animate的效果，通过空间的旋转，就好像是一个规则的立方体在旋转！.space{位置：相对；宽度：100%；高度：100%；-webkit-transform-style:preserve-3d;-webkit-transform-origin:centercenter-50px;-webkit-animation:s4s线性无限；}@-webkit-keyframes{0%{-webkit-transform:rotateY(0);}100%{-webkit-transform:rotateY(-359.9deg);}}正四面体了解了正六面体之后，正四面体就比较容易上手了。正四面体由四个正三角形组成。每个面之间的角度为70.5度，因此旋转角度将为70.5度。首先你可以看到HTML的结构只有四个div。相机和空间的设置就不多说了。您可以直接看到这些框的属性。不要忘记画一个等边三角形。使用边框来绘制。.spacediv{位置：绝对；宽度：0；高度：0；边框宽度：050px87px；边框样式：实心；opacity:.4;}先看box1，box1还是最简单的（但也比正方形麻烦一点），这里我想用box1做底，所以除了直接移动位置，移动之后，我必须绕X轴旋转90度。比较特别的是，因为正三角形是由边框组成的，所以颜色就是把边框改一下就可以了。.box1{border-color:transparent透明#f00;变换原点：中心底部；transform:translateX(50px)translateY(50px)rotateX(-90deg);}然后就是其他三个边了，box2和box1几乎一样简单，只是box1旋转了90度，box2旋转了19.5度，因为box1与box2的夹角为70.5度。.box2{border-color:transparent透明#00f;变换原点：中心底部；transform:translateX(50px)translateY(50px)rotateX(-19.5deg);}box3比较麻烦，我们需要先让box3绕Y轴旋转60度（因为等边三角形的每个角都是60度），之后缠绕，然后绕X轴旋转19.5度，为什么这里的19.5度是正值？因为我们绕Y轴旋转后，X轴也跟着旋转，所以绕X轴的方向就变成反了。.box3{border-color:transparent透明#00f;变换原点：右下角；transform:translateX(50px)translateY(50px)rotateY(60deg)rotateX(19.5deg);}box4和box3类似，同样要先缠绕Y旋转60度，这次要转负数，因为它是另一边。.box4{border-color:transparent透明#f0f;变换原点：左下角；transform:translateX(50px)translateY(50px)rotateY(-60deg)rotateX(19.5deg);}同上，应该得到如下图的结果：同样的，给空间添加动画，可以看到正四面体旋转！不同的是中心点的位移是29px，为什么呢？因为要捕捉等边三角形的中心点，所以数学公式为：tan(30deg)x50=28.86。.space{位置：相对；宽度：100%；高度：100%；变换样式：保留3d；-webkit-transform-origin:centercenter29px;-webkit-animation:s4s线性无限;}@-webkit-keyframess{0%{-webkit-transform:rotateY(0);}100%{-webkit-transform:rotateY(-359.9deg);}}

上一篇：前端日常实战：96#视频演示如何使用纯CSS和D3制作宇宙飞船

下一篇：CSS单位概述

玩转CSS3D——四面体与六面体相关文章

最新推荐

猜你喜欢