感謝萬老師的講課，無意中連接進入聽了一下，感覺效果還不錯，學習了一下。
先看效果：
代碼 如下：
<!DocType html>
<html>
<head>
<title>test css3</title>
<style>
@keyframes rotate{
0%{transform:rotateX(0deg) rotateY(0deg);}
100%{transform:rotateX(360deg) rotateY(360deg);}
}
html {background:linear-gradient(#FF0 10%,#3F9 90%); height:100%;}
.wrap {margin:150px auto;perspective:1000px;width:200px;height:200px;}
.cube {margin:auto;width:200px;height:200px;position:relative;transform-style:preserve-3d;animation:rotate 20s infinite linear;}
.cube > div{width:100%;height:100%;position:absolute;background-color:#333;opacity:.9;border:1px solid #fff;color:#fff;font-size:36px;font-family:"微軟雅黑"; font-weight:bold; text-align:center;line-height:200px;transition:transform .2s ease-in;}
.cube > span{display:block;width:100px;height:100px;border:1px solid #fff;background:#666;opacity:.8;position:absolute;top:50px;left:50px;font-size:18px;font-family:"微軟雅黑"; font-weight:bold; text-align:center;line-height:100px;transition:transform .2s ease-in;}
.cube > span img {width:100px;height:100px;}
.cube > div img {width:200px;height:200px;}
.cube .out-back{transform:translateZ(-100px) rotateY(180deg);}
.cube .out-left{transform:translateX(-100px) rotateY(-90deg);}
.cube .out-right{transform:translateX(100px) rotateY(90deg);}
.cube .out-top{transform:translateY(-100px) rotateX(90deg);}
.cube .out-bottom{transform:translateY(100px) rotateX(-90deg);}
.cube .out-front{transform:translateZ(100px); }
.cube .in-back{transform:translateZ(-50px) rotateY(180deg);}
.cube .in-left{transform:translateX(-50px) rotateY(-90deg);}
.cube .in-right{transform:translateX(50px) rotateY(90deg);}
.cube .in-top{transform:translateY(-50px) rotateX(90deg);}
.cube .in-bottom{transform:translateY(50px) rotateX(-90deg);}
.cube .in-front{transform:translateZ(50px); }
.wrap:hover .cube > .out-front {color:red;transform:translateZ(200px);}
.wrap:hover .cube > .out-back {color:red;transform:translateZ(-200px) rotateY(180deg);}
.wrap:hover .cube > .out-left{transform:translateX(-200px) rotateY(-90deg);}
.wrap:hover .cube > .out-right{transform:translateX(200px) rotateY(90deg);}
.wrap:hover .cube > .out-top{transform:translateY(-200px) rotateX(90deg);}
.wrap:hover .cube > .out-bottom{transform:translateY(200px) rotateX(-90deg);}
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<div class="out-front">out-front</div>
<div class="out-back">out-back</div>
<div class="out-left">out-left</div>
<div class="out-right">out-right</div>
<div class="out-top">out-top</div>
<div class="out-bottom">out-bottom</div>
<span class="in-front">in-front</span>
<span class="in-back">in-back</span>
<span class="in-left">in-left</span>
<span class="in-right">in-right</span>
<span class="in-top">in-top</span>
<span class="in-bottom">in-bottom</span>
</div>
</div>
</body>
</html>