0
点赞
收藏
分享

微信扫一扫

CSS 3.0实现正方体3D效果


分享一个用CSS 3.0实现的正方体3D效果,效果如下: 

CSS 3.0实现正方体3D效果_html

以下是代码实现:

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>转旋盒模型</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}

#div1 {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0);
float: left;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
transform: perspective(800px) rotateX(-80deg);
transform-style: preserve-3d;
}

#div1>div {
width: 100%;
height: 100%;
position: absolute;
transition: 1s;
}

#front {
transform: translateZ(100px);
background: yellow;
}

#after {
transform: translateZ(-100px);
background: red;
}

#left {
transform: rotateY(90deg) translateZ(-100px);
background: green;
}

#right {
transform: rotateY(-90deg) translateZ(-100px);
background: blue;
}

#topNode {
transform: rotateX(90deg) translateZ(-100px);
background: pink;
}

#bottom {
transform: rotateX(-90deg) translateZ(-100px);
background: orange;
}
</style>
</head>

<body>
<div id='div1'>
<div id='front'></div>
<div id='after'></div>
<div id='left'></div>
<div id='right'></div>
<div id='topNode'></div>
<div id='bottom'></div>
</div>

<script type="text/javascript">
var allDiv = div1.children;
var reg = 0;

//自动旋转
setInterval(function () {
reg++;
div1.style.transform = 'perspective(800px) rotateX(' + (reg * 0.3) + 'deg) rotateY(' + (reg * 0.2) + 'deg)';
}, 0);

//随机改变颜色
setInterval(function () {
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].style.background = 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')'
}
}, 1000);

</script>
</body>

</html>

举报

相关推荐

0 条评论