正确效果
我做的
代码如下【【【
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.pic{width:100%;height:230px;background:#03C;margin-top:200px;position:relative;-webkit-transform-style:-webkit-preserve-3d;perspective:800px;}
.pic img{width:300px;height:200px;position:absolute;}
.pic .img1{left:150px;-webkit-transform:rotateY(45deg);}
.pic .img2{left:300px;-webkit-transform:rotateY(45deg);}
.pic .img3{left:450px;}
.pic .img4{left:600px;-webkit-transform:rotateY(-45deg);}
.pic .img5{left:750px;-webkit-transform:rotateY(-45deg);}
</style>
</head>
<body>
<div class="pic">
<img class="img1" src="img/1.jpg" />
<img class="img2" src="img/2.jpg" />
<img class="img3" src="img/3.jpg" />
<img class="img4" src="img/4.jpg" />
<img class="img5" src="img/5.jpg" />
</div>
</body>
</html>
】】】
我做的
代码如下【【【
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.pic{width:100%;height:230px;background:#03C;margin-top:200px;position:relative;-webkit-transform-style:-webkit-preserve-3d;perspective:800px;}
.pic img{width:300px;height:200px;position:absolute;}
.pic .img1{left:150px;-webkit-transform:rotateY(45deg);}
.pic .img2{left:300px;-webkit-transform:rotateY(45deg);}
.pic .img3{left:450px;}
.pic .img4{left:600px;-webkit-transform:rotateY(-45deg);}
.pic .img5{left:750px;-webkit-transform:rotateY(-45deg);}
</style>
</head>
<body>
<div class="pic">
<img class="img1" src="img/1.jpg" />
<img class="img2" src="img/2.jpg" />
<img class="img3" src="img/3.jpg" />
<img class="img4" src="img/4.jpg" />
<img class="img5" src="img/5.jpg" />
</div>
</body>
</html>
】】】
