<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 3D转换</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.box {
100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 24px;
margin: 100px auto;
position: relative;
transform: rotateY(30deg) rotateX(-30deg);
transform-style: preserve-3d;
/*perspective:200px;*/
animation: rotate 4s linear infinite;
}
.box div{
200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
opacity: 0.6;
}
.front{
transform: translateZ(100px);
background: pink;
}
.back{
transform: translateZ(-100px) rotateY(180deg);
background: green;
}
.left{
transform: translateX(-100px) rotateY(-90deg);
background: yellowgreen;
}
.right{
transform: translateX(100px) rotateY(90deg);
background: blueviolet;
}
.top{
transform: translateY(-100px) rotateX(90deg);
background: blue;
}
.bottom{
transform: translateY(100px) rotateX(-90deg);
background: red;
}
@keyframes rotate {
from{
transform: rotateY(30deg) rotateX(-30deg);
}
to{
transform: rotateY(390deg) rotateX(-30deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>