立方体绘制
3D变化的坐标如下所示:
网格所在的面代表我们的设备屏幕(大多情况下为电脑屏幕)
transform
浏览器支持情况:
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 需要前缀 -ms-。
旋转测试:
正常情况
transform: rotateX(Xdeg);[以X为轴进行旋转]
transform: rotateY(Xdeg);[以Y为轴进行旋转]
transform: rotateZ(Xdeg);[以Z为轴进行旋转]
偏移测试:
translateX
translateY
注:这里将父容器宽高设为与子容器一样(若有边框需要考虑边框的大小)
注:示例并未做兼容处理
1 前后两个面经Z轴偏移,前为正(向屏幕外,用户的方向偏移),后为负得到
2 左右两个面经旋转偏移得到
同时设置旋转和偏移时,属性的顺序会影响最终的效果
立方体效果(添加了旋转动画)
<div class="square-wrapper">
<div class="front"></div>
<div class="behind"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
|
.square-wrapper,
.square-wrapper > div{
position: absolute;
width: 100px;
height: 100px;
}
/*立体实现*/
.square-wrapper{
margin-top: 20px;
transform-style: preserve-3d;
animation: square-animation 5s infinite;
}
@keyframes square-animation{
0% {transform: rotateX(0deg) rotateY(0deg);}
45% {transform: rotateX(90deg)}
75% {transform: rotateY(90deg);}
90% {transform: rotateX(45deg) rotateY(45deg);}
100% {transform: rotateX(0deg) rotateY(0deg);}
}
.square-wrap .top{
background-color: red;
transform: translateY(-50px) rotateX(90deg);
}
.square-wrap .bottom {
background-color: brown;
transform: translateY(50px) rotateX(-90deg);
}
.square-wrap .left{
background-color: green;
transform:translateX(-50px) rotateY(90deg);
}
.square-wrap .right{
background-color: blue;
transform: translateX(50px) rotateY(-90deg);
}
.square-wrap .front{
background-color: #ddd;
transform: translateZ(50px);
}
.square-wrap .behind{
background-color: #000000;
transform: translateZ(-50px);
} 原文链接: |