<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS之旋转立方体</title>
<style>
*{ font-size:200px;}
/*大元素*/
.wrap {
position:relative;
width:400px; height:400px;
margin:100px auto;
perspective: 800px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective-origin: 50% 100px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective-origin: 50% 100px;
-ms-perspective-origin: 50% 100px;
-o-perspective-origin: 50% 100px;
}
/*所有div容器*/
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
}
/*盒子各面共用的CSS*/
.cube div {
position: absolute;
width: 200px;
height: 200px;
opacity:1;
}
/*盒子各面的位置*/
.back {
transform: translateZ(-100px) rotateY(180deg);
-webkit-transform: translateZ(-100px) rotateY(180deg);
-moz-transform: translateZ(-100px) rotateY(180deg);
-ms-transform: translateZ(-100px) rotateY(180deg);
-o-transform: translateZ(-100px) rotateY(180deg);
background-color:#ff0000;
background-size:200px;
}
.right {
transform: rotateY(-270deg) translateX(100px);
-webkit-transform: rotateY(-270deg) translateX(100px);
-moz-transform: rotateY(-270deg) translateX(100px);
-ms-transform: rotateY(-270deg) translateX(100px);
-o-transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
background-color:#ff00ff;
background-size:200px;
}
.left {
transform: rotateY(270deg) translateX(-100px);
-webkit-transform: rotateY(270deg) translateX(-100px);
-moz-transform: rotateY(270deg) translateX(-100px);
-ms-transform: rotateY(270deg) translateX(-100px);
-o-transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
background-color:#00ff00;
background-size:200px;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform: rotateX(-90deg) translateY(-100px);
-moz-transform: rotateX(-90deg) translateY(-100px);
-ms-transform: rotateX(-90deg) translateY(-100px);
-o-transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
background-color:#ffff00;
background-size:200px;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
-webkit-transform: rotateX(90deg) translateY(100px);
-moz-transform: rotateX(90deg) translateY(100px);
-ms-transform: rotateX(90deg) translateY(100px);
-o-transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
background-color:#00ffff;
background-size:200px;
}
.front {
transform: translateZ(100px);
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
background-color:#0000f00;
background-size:300px;
}
/*动起来*/
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(360deg); }
}
@-ms-keyframes spin {
from { -ms-transform: rotateY(0); }
to { -ms-transform: rotateY(360deg); }
}
@-o-keyframes spin {
from { -o-transform: rotateY(0); }
to { -o-transform: rotateY(360deg); }
}
.cube {
animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
-ms-animation: spin 5s infinite linear;
-o-animation: spin 5s infinite linear;
}
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>