<html>
<style>
.container{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 40%;
}
.img{width:200px; padding:20px;}
.trans{
border:1px solid #333;height:100px;width: 200px;margin: 20px; float: left;
}
.trans_rotata{
-webkit-transform:rotate(7deg);
}
.trans_rotataX{
-webkit-transform:rotateX(60deg);
}
.trans_3d{
-webkit-transform:rotate3d(1,-1,0,60deg)
}
.opacity{
opacity: 0.2;
}
.trans_scale{
-webkit-transform:scale(1.1, 1.1);
}
.trans_scale3D{
-webkit-transform:scale3D(1.1, 1.1, 1.1);
}
.img:hover{
-webkit-transform:scale3D(1.1, 1.1, 1.1);
}
.trans_skew{
-webkit-transform:skew(30deg,10deg);
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0);
}
to {
-webkit-transform: rotateY(-360deg);
}
}
.cube {
margin: 0 auto;
width: 200px;
height: 200px;
position: relative;
-webkit-animation: spin 8s infinite linear;
-webkit-transform-style: preserve-3d;
}
.cube .rect {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 125pt;
text-align: center;
line-height: 200px;
background-color: #bbb;
opacity: 0.5;
}
.cube .cubeA {
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
}
.cube .cubeB {
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px);
}
.cube .cubeC {
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
}
.cube .cubeD {
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
}
.cube .cubeE {
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
}
.cube .cubeF {
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(0deg) translateZ(100px);
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
$(".trans_rotata").click(function(){
var now = "3700";
$(this).animate({deg: 5000},{
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
$(this).css('-ms-transform','rotate('+now+'deg)');
$(this).css('-o-transform','rotate('+now+'deg)');
$(this).css('transform','rotate('+now+'deg)');
},
duration:'slow'
},'linear');
})
})
</script>
<div class="container">
<div class="trans trans_rotata"></div>
<div class="trans"></div>
<div class="trans trans_rotataX"></div>
<div class="trans trans_skew"></div>
<br>
<img class="img"src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
<img class="img trans_rotataX" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
<img class="img trans_3d" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
<img class="img trans_3ds" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
<img class="img trans_scale" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
<img class="img trans_scale3D opacity" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
<div class="cube"><!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果-->
<div class="cubeA rect">1</div><!--具体效果看css就明白了。旋转下就好-->
<div class="cubeB rect">2</div>
<div class="cubeC rect">3</div>
<div class="cubeD rect">4</div>
<div class="cubeE rect">5</div>
<div class="cubeF rect">6</div>
</div>
</div>
</html>
