效果預覽：http:///keleyi/phtml/css3/11.htm
另一個立方體旋轉效果：http:///keleyi/phtml/css3/11a.htm
第一個效果代碼：
<!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>
<title>CSS3立方體旋轉-</title>
<style>
.cube {
margin:10em auto;
position: relative;
width: 5em; height: 5em;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(30deg) rotateX(10deg);
}
.face {
position: absolute;
width: 100%; height: 100%;
box-sizing: border-box;
border: solid .125em;
}
.cube--ani {
-webkit-animation: rot 4s linear infinite;
}
@-webkit-keyframes rot {
to { -webkit-transform: rotateY(-330deg) rotateX(370deg); }
}
.face:nth-child(1) {
-webkit-transform: /*rotateY(0deg)*/ translateZ(2.5em /* half the side length, 5em in this case */);
}
.face:nth-child(2) {
-webkit-transform: rotateY( 90deg) translateZ(2.5em);
}
.face:nth-child(3) {
-webkit-transform: rotateY(180deg) translateZ(2.5em);
}
.face:nth-child(4) {
-webkit-transform: rotateY(270deg) translateZ(2.5em);
}
</style>
</head>
<body>
請使用Chrome浏覽器(支持CSS3)查看本效果。<a href="http:///a/bjad/5vw5k0au.htm" target="_blank">原文</a>
<div class='container container--realistic'>
<div class='cube cube--ani'>
<div class='face'>1</div>
<div class='face'>2</div>
<div class='face'>3</div>
<div class='face'>4</div>
</div>
</div>
</body>
</html>