CSS3实现旋转木马
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
perspective: 1000px;
}
.wrap {
transform-style: preserve-3d;
animation:run 5s linear infinite;
position: relative;
width:200px;
height:300px;
/*border:1px solid red;*/
margin:200px auto;
}
.wrap img {
width:100%;
height: 100%;
}
.box {
position: absolute;
top: 0;
left: 0;
width:200px;
height:300px;
border:1px solid red;
border:1px solid #000;
border-radius: 10px;
overflow: hidden;
}
.box1 {
transform:translateZ(300px);
}
.box2 {
transform:rotateY(45deg) translateZ(300px);
}
.box3 {
transform: rotateY(90deg) translateZ(300px);
}
.box4 {
transform: rotateY(135deg) translateZ