transform: rotateY(0deg) translateZ(118px);
}
.s1 ul li:nth-child(2) {
transform: rotateY(90deg) translateZ(118px);
}
.s1 ul li:nth-child(3) {
transform: rotateY(180deg) translateZ(118px);
}
.s1 ul li:nth-child(4) {
transform: rotateY(-90deg) translateZ(118px);
}
.s2 {
float: right;
}
.s2 ul li:nth-child(1) {
transform: rotateY(0deg) translateZ(200px);
}
.s2 ul li:nth-child(2) {
transform: rotateY(90deg) translateZ(200px);
}
.s2 ul li:nth-child(3) {
transform: rotateY(180deg) translateZ(200px);
}
.s2 ul li:nth-child(4) {
transform: rotateY(-90deg) translateZ(200px);
}
</style>
</head>
<body>
<div class=’product’>
<!– scene类是为了修饰两个div的相同点 –>
<!– s1和s2是为了显示两个div的不同，一个左浮动，一个右浮动 –>
<div class=’scene s1′>
<ul>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
</ul>
</div>
<div class=’scene s2′>
