<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--抱歉，时间紧暂时只写了谷歌的方法，ie等浏览器的兼容还没写0.0.-->
<title>C3旋转立方体</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: skyblue;
}
.box {
margin: 100px auto;
width: 200px;
height: 200px;
position: relative;
/*3d旋转效果*/
transform: rotate3d(1, 1, 0, -30deg);
/*保留旋转效果不让回来*/
transform-style: preserve-3d;
/*喜欢添加景深效果的可以自己调节啊*/
perspective: 0px;
/*角度*/
perspective-origin: 0px 0px;
}
.box > div {
width: 200px;
height: 200px;
position: absolute;
opacity: 0.5;
text-align: center;
line-height: 200px;
}
.front {
background-color: #ffc96b;
transform: translateZ(100px);
}
.back {
background-color: #a2faff;
transform: translateZ(-100px) rotate(180deg);
}
.left {
background-color: #ffcef2;
transform: translateX(-100px) rotateY(-90deg);
}
.right {
background-color: #a2d1ff;
transform: translateX(100px) rotateY(90deg);
}
.top {
background-color: #f0f4ff;
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
background-color: #26d8ff;
transform: translateY(100px) rotateX(-90deg);
}
.box:hover {
animation: move 5s infinite linear;
}
@keyframes move {
from {
transform: rotate3d(1, 0, 0, 290deg);
}
50% {
transform: rotate3d(0, 1, 0, -290deg);
}
to {
transform: rotate3d(0, 0, 1, 266deg);
}
}
</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>
