<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转的正方体</title>
<style type="text/css">
*{
margin: 0;
padding:0
}
.wrap{
perspective:2000px;
}
.wrap ul{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
animation: move 5s infinite;
transform-style: preserve-3d;
transform-origin: 100px 100px -100px;
}
.wrap ul li{
left: 0;
top: 0;
width: 196px;
height: 196px;
color: #fff;
font-size: 60px;
list-style: none;
text-align: center;
line-height: 196px;
position: absolute;
border:2px solid #000;
background: rgba(000,000,000,0.5);
}
.wrap ul li:nth-child(1){
transform-origin: top;
transform: rotateX(-90deg);
}
.wrap ul li:nth-child(2){
transform-origin: bottom;
transform: rotateX(90deg);
}
.wrap ul li:nth-child(3){
transform-origin: left;
transform: rotateY(90deg);
}
.wrap ul li:nth-child(4){
transform-origin: right;
transform: rotateY(-90deg);
}
.wrap ul li:nth-child(5){
transform: translateZ(-200px);
}
.wrap ul li:nth-child(6){
transform:translateZ(0px);
}
@keyframes move {
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
CSS3效果：旋转的正方体
免责声明！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。