CSS3 transform动画 3D旋转立体正方形
在一个大的div里放置六个小div,分别向前后,向左右,向上下移动相等位置,再将平面div旋转,添加animation动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立体正方形</title>
<style>
#box {
margin: 100px auto 0;
transform-style: preserve-3d;
width: 300px;
height: 300px;
border: 1px solid #ccc;
position: relative;
animation: zhuan 5s linear infinite;
}
@keyframes zhuan {
from {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg) rotateZ(45deg);
}
to {
transform: rotateY(360deg);
}
}
#box>div {
width: 100%;
height: 100%;
position: absolute;
}
/* 前方 */
#box>:nth-child(1) {
background-color: lightblue;
transform: translateZ(150px);
}
/* 右边 */
#box>:nth-child(2) {
background-color: lightcoral;
transform: translateX(150px) rotateY(90deg);
}
/* 左边 */
#box>:nth-child(3) {
background-color: lightseagreen;
transform: translateX(-150PX) rotateY(90deg);
}
/* 下方 */
#box>:nth-child(4) {
background-color: gold;
transform: translateY(150px) rotateX(90deg);
}
/* 上方 */
#box>:nth-child(5) {
background-color: lightslategrey;
transform: translateY(-150px) rotateX(90deg);
}
/* 后方 */
#box>:nth-child(6) {
background-color: lightgreen;
transform: translateZ(-150px);
}
</style>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>