[案例]立方体
实现
立方体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box{
width: 980px;
height: 500px;
position: absolute;
transform-style: preserve-3d;
perspective: 600px;
}
.item{
width: 100%;
height: 100%;
position: absolute;
}
.item:nth-child(1){
background: red;
transform: rotateX(0deg) translateZ(250px);
}
.item:nth-child(2){
background: yellow;
transform: rotateX(90deg) translateZ(250px);
}
.item:nth-child(3){
background: purple;
transform: rotateX(180deg) translateZ(250px);
}
.item:nth-child(4){
background: coral;
transform: rotateX(270deg) translateZ(250px);
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
旋转
$(function(){
var count = 0;
function rotate(){
count++;
$(".item").each(function(i){
var deg = 90*i-count*90;
$(this).css("transform", "rotateX("+deg+"deg) translateZ(250px)");
});
}
$("body").click(rotate);
});
动画
.item{
width: 100%;
height: 100%;
position: absolute;
transition: transform .8s;
}