用css3动画制造正方体
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正方体</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
css
*{
margin:0px;
padding:0px;
list-style: none;
}
ul{
width:200px;
height:200px;
/* background: green; */
border:1px dashed red;
margin:100px auto;
transform-style: preserve-3d;/* 表示所有子元素在3D空间中呈现。 */
position:relative;
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
animation:move 5s infinite linear;
}
li{
width:200px;
height:200px;
position:absolute;
top:0px;
left: 0px;
}
li:nth-of-type(1){
/* 前面 */
transform:translateZ(100px);
background:url('../images/pic01.png');
}
li:nth-of-type(2){
/* 后面 */
transform: translateZ(-100px);
background:url('../images/pic02.png');
}
li:nth-of-type(3){
/* 左边 */
transform: translateX(-100px) rotateY(90deg);
background: url('../images/pic03.png');
}
li:nth-of-type(4){
/* 右边 */
transform: translateX(100px) rotateY(90deg);
background: url('../images/pic04.png');
}
li:nth-of-type(5){
/* 上面 */
transform:translateY(-100px) rotateX(90deg);
background: url('../images/pic05.png');
}
li:nth-of-type(6){
/* 下面 */
transform: translateY(100px) rotateX(90deg);
background:url('../images/pic06.png');
}
@keyframes move{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}