了解一些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 属性设置被转换元素的位置,可以理解为转换的中心点在哪个位置
状态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);
}
状态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);
}
这样一个3d立方体就已经构建完成啦 ^_^
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。