css 3d立方体

2019年9月11日 143次阅读 来源: bestvist

了解一些css3动画知识，3d效果实现。
原文连接

状态1

首先创建一个立方体容器元素

.box {
     position: relative;
     width: 100px;
     height: 100px;
     transform-style: preserve-3d;
}

transform-style 属性的定义为规定如何在3d空间中呈现被嵌套元素
flat为默认值平面显示，preserve-3d为子元素保留3d位置
也就是该属性在需要展示3d效果元素的父元素上设置

立方体的六个面

创建6个div元素设置相同绝对定位显示，为了效果明显每个面设置了0.5的透明度。

.box div {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: .5;
     transform-origin: center;
}

transform-origin 属性设置被转换元素的位置，可以理解为转换的中心点在哪个位置

《css 3d立方体》

状态2

为了显示出立方体的上下面和侧面需要对4个面进行绕X、Y轴的直角转换

.box div:nth-of-type(1),
.box div:nth-of-type(2){
     transform: rotatex(90deg);
}

.box div:nth-of-type(3),
.box div:nth-of-type(4){
     transform: rotatey(90deg);
}

可以给容器增加一定角度突出效果

.box{
     transform: rotatex(45deg) rotatey(45deg);
}

《css 3d立方体》

状态3

接下来就是撑开6个面，构建成为立方体啦
在每个面转换的基础上增加/减少宽高二分之一的Z轴位置转换

.box div:nth-of-type(1){
     transform: rotatex(90deg) translatez(50px);
}

.box div:nth-of-type(2){
     transform: rotatex(90deg) translatez(-50px);
}

.box div:nth-of-type(3){
     transform: rotatey(90deg) translatez(50px); 
}

.box div:nth-of-type(4){
     transform: rotatey(90deg) translatez(-50px); 
}

.box div:nth-of-type(5){
     transform: translatez(50px); 
}

.box div:nth-of-type(6){
     transform: translatez(-50px); 
}

《css 3d立方体》

这样一个3d立方体就已经构建完成啦 ^_^

    原文作者：bestvist
    原文地址: https://segmentfault.com/a/1190000010808860
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞