css3正方体

本人是前不久刚转行到前端的，对代码还是小白，不过有兴趣总是好的。提到css3，总是感觉不太熟悉，因此还是从最简单的做起吧。

先做个正方体吧，大家都知道，正方体有6个面的。因此就按照这样子写出来吧，设置一个盒子，6个面：

<style>
*{
margin:0;
padding:0;
}
.box{
width:200px;
height:200px;
margin:200px auto;
position:relative;
}
.box div{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
border: 1px solid #ccc;
font-size: 125pt;
text-align: center;
line-height: 200px;
background-color: skyblue;
opacity: 0.5;
}

</style>

<div class="box">
<div class="front">前</div>
<div class="back">后</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="down">下</div>
</div>

不过，根据做出来之后的感觉，还是给它带一定的动画，才好观察，不然自己甚至都看不到相应的效果呢。

因此：个人觉得先给box加个动画吧。

.box{
width:200px;
height:200px;
margin:200px auto;
position:relative;
animation: rotate 16s infinite linear;
transform-style: preserve-3d;
}

@keyframes rotate {
from { transform: rotateY(0) rotateZ(0); }
to { transform: rotateY(-360deg) rotateZ(-360deg);}
}

接着就是布局各个面了，

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

由于自己比较小白，因此一开始，对translateZ(100px)，还是有一定的疑问的。大家如果有和我一样小白的，可以试着把100px修改修改，就可以看出效果的。就是在Z轴上面的偏移量。因为没有设置它的旋转点，因此所有的面都是在box组成的3D效果的最中心进行旋转偏移。

这样子就算完成了一个css3的正方体。

本人小白，有什么感觉说错的，希望大家可以指出来一下。谢谢。

转载于:https://www.cnblogs.com/lovemylove/p/4981499.html