HTML小案例-CSS3实现旋转立方体
话不多说,先看效果
** 以下为源代码 **
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3实现旋转立方体</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 400px;
/*border: 4px yellow solid;*/
/* 上下200px, 水平居中 */
margin: 200px auto;
/* 调整景深为 1200px */
perspective: 1200px;
}
.box ul {
width: 300px;
height: 300px;
border: 1px solid blue;
margin: 50px;
position: relative;
/* 将其转变为3D动画 */
transform-style: preserve-3D;
/* 匀速, 无限循环*/
animation: move 3s infinite linear;
/* 修改旋转中心轴 */
transform-origin: center center 150px;
}
.box ul li{
width: 300px;
height: 300px;
opacity: 0.4;
list-style: none;
font: 50px white;
text-align: center;
line-height: 300px;
position: absolute;
}
.box ul li:nth-of-type(1){background-color: cadetblue}
/* 先进行平移,再将其旋转 */
.box ul li:nth-of-type(2){background-color: burlywood; transform: translateX(300px) rotateY(-90deg); transform-origin: left}
.box ul li:nth-of-type(3){background-color: chartreuse; transform: translateX(-300px) rotateY(90deg); transform-origin: right}
.box ul li:nth-of-type(4){background-color: pink; transform: translateY(300px)rotateX(90deg); transform-origin: top }
.box ul li:nth-of-type(5){background-color: cornflowerblue; transform: translateY(-300px) rotateX(-90deg); transform-origin: bottom}
.box ul li:nth-of-type(6){background-color: coral; transform: translateZ(300px)}
@keyframes move {
from {transform: rotateY(0deg)}
to {transform: rotateY(360deg)}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>