您的位置：首页 > Web前端 > CSS

css3简易魔方绘制

2016-04-30 07:53 597 查看


立方体绘制

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);
}

原文链接：

http://yangxiaofu.com/2015/11/11/css3简易魔方绘制/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航