当前位置:Gxlcms > html代码 > CSS3打造3D立方体_html/css_WEB-ITnose

CSS3打造3D立方体_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:27人阅读

前言:今天用css3实现正方体。通过此案例,可以对css3在实现3D效果方面的属性有一定了解。

案例效果

HTML分析

最外层的.container触发3d效果,#cube保留父元素的3d空间同时包裹正方体的6个面,给每个面设置对应的class属性。
HTML代码如下:

1
2
3
4
5
6
CSS分析

1. 外观

给立方体的每个面设置不同的颜色,并且对字体进行设置。
代码如下:

    #cube figure{        font-size: 120px;        line-height: 196px;        font-weight: bold;        color: white;        text-align: center;    }    .front  { background: hsla(   0, 100%, 50%, 0.5 ); }    .back   { background: hsla(  60, 100%, 50%, 0.5 ); }    .right  { background: hsla( 120, 100%, 50%, 0.5 ); }    .left   { background: hsla( 180, 100%, 50%, 0.5 ); }    .top    { background: hsla( 240, 100%, 50%, 0.5 ); }    .bottom { background: hsla( 300, 100%, 50%, 0.5 ); }

2. 定位

#cube及其包裹的子元素figure相对最外层.container绝对定位,.figure给2px的边框。
代码如下:

.container{        width: 200px;        height: 200px;        position: relative;    }    #cube{        width: 100%;/*让#cube与.container的transform-origin一样*/        height: 100%;        position: absolute;    }    #cube figure{        width: 196px;        height: 196px;        border:2px solid black;        position: absolute;    }

3. 3D效果

首先,在脑海里要有一个3D坐标系

通俗的说,Z轴就是垂直于电脑屏幕的轴,正方向指向正在电脑面前的你,X轴就是左右,Y轴就是上下。
(1) 相关属性简介:

  • transform相关函数:

    • rotate:围绕某个轴进行旋转,如rotateY(30deg)就是围绕Y轴旋转30度。正值为顺时针旋转,负值逆时针。

    • translate:在某个轴上的位移。translateZ(10px)就是在Z轴的正方向上位移10px,也就是说在原始坐标下,元素朝你位移了10px,和你接近了10px.

  • 3D属性

    • perspective:创造3D空间,值越小,元素的纵深越大,3D效果越明显。需设置在父元素。

    • transform-style:有flat和preserve-3d两个值。flat为2D平面,preserve-3d为保留父元素创造的3D空间。flat为默认值。

需要详细了解可以参看:
mdn
w3cplus

当然,最好的办法还是自己一个个属性的尝试。最好用在线编辑器可以实时查看效果。比如jsbin

(2) 效果分析
首先,我们要创造3D空间,让子元素使用父元素创造的3D空间。

.container{perspective:1000px;}#cube{transform-style:preserve-3d;}

在创造3D空间后,根据上面你已了解的transform相关函数效果,我们对右面进行一个重点分析,其他面也可采用相同的思想创建。

对于右面,首先绕Y轴旋转90度,这时右面应该是垂直居中于正面.front的。接下来,我们应该让.right右移.front一半的距离,即100px。

请注意:
如果这时候你写的是translateX(100px)的话,你会发现右面是向里面移动的。这是因为:旋转后坐标系会跟着旋转,也就是说,.right绕Y轴旋转90度后,坐标轴也随着转了90度,此时.right的Z轴已经跟着转到了我们的“右边”去了(不知道这样描述会不会懂...)。

因此,我们应该使用translateZ(100px)实现.right向“右”移动100px.
由于坐标轴会跟着元素旋转,所以我们在书写时一定要注意transform function的书写顺序。你可以先translateZ(100px)再rotateY(90deg)看看效果一样不。

同理,对于其他几面可以根据这个思路来分析。
代码如下:

.front{transform:rotateY(0deg) translateZ(100px);}.back{transform:rotateX(180deg) translateZ(100px);}.right{ transform:rotateY(90deg) translateZ(100px);}.left{transform:rotateY(-90deg) translateZ(100px);}.top{transform:rotateX(90deg) translateZ(100px);}.bottom{transform:rotateX(-90deg) translateZ(100px);}

这样,我们用CSS3打造的立方体就实现了。

过渡效果

我们让鼠标hover#cube时,figure再进行3D的变化。

    #cube:hover .front{transform:rotateY(0deg) translateZ(100px);}    #cube:hover .back{transform:rotateX(180deg) translateZ(100px);}    #cube:hover .right{ transform:rotateY(90deg) translateZ(100px);}    #cube:hover .left{transform:rotateY(-90deg) translateZ(100px);}    #cube:hover .top{transform:rotateX(90deg) translateZ(100px);}    #cube:hover .bottom{transform:rotateX(-90deg) translateZ(100px);}

最后,我们让这个变换有一个过渡的效果
#cube figure{transition:all 1s;}
OK.这样,我们的效果就实现啦!

长方体的实现

在实现长方体的时候,我们要注意不同面的宽高、位移不一样。
HTML代码如下:

1
2
3
4
5
6

CSS代码如下:

*{margin:0;}    .container{      width:300px;      height:200px;      position:relative;      perspective:1000px;      margin:50px auto;    }    #box{      width:100%;      height:100%;      position:absolute;      transform-style:preserve-3d;      transition:all 1.5s;    }    #box figure{      position:absolute;      font-size:120px;      font-weight:bold;      color:white;      line-height:196px;      text-align:center;      border:2px solid black;      transition:all 1s;    }    .front,.back{width:296px;height:196px;}    .right,.left{width:96px;height:196px;left:100px;}    .top,.bottom{width:296px;height:96px;top:50px;}         .front  { background: hsla(   0, 100%, 50%, 0.5 ); }     .back   { background: hsla(  60, 100%, 50%, 0.5 ); }     .right  { background: hsla( 120, 100%, 50%, 0.5 ); }     .left   { background: hsla( 180, 100%, 50%, 0.5 ); }     .top    { background: hsla( 240, 100%, 50%, 0.5 ); }     .bottom { background: hsla( 300, 100%, 50%, 0.5 ); }        #box:hover .front{transform:rotateY(0deg) translateZ(50px);}    #box:hover .back{transform:rotateY(180deg) translateZ(50px);}    #box:hover .right{transform:rotateY(90deg)translateZ(150px);}    #box:hover .left{transform:rotateY(-90deg) translateZ(150px);}    #box:hover .top{transform:rotateX(90deg) translateZ(100px);}    #box:hover .bottom{transform:rotateX(-90deg) translateZ(100px);}    #box:hover{transform:translateZ(200px);}
总结

其实实现这个,收获最大的就是知道了坐标轴会改变坐标轴会改变坐标轴会改变,以及transform的几个函数的效果。因此,一定要注意transform函数的书写顺序。

参考资料

mdn
w3cplus
Intro to CSS 3D transforms

人气教程排行