显示效果:
以下是图片素材
以下是页面代码部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3设置图片显示3D效果</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<style type="text/css">
*{ margin:0; padding:0;}
html{ max-width:640px; min-width:320px; margin:0 auto;}
html,body{ display:block; width:100%; height:100%;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei";
-webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-callout:none;
}
#box{ width:300px; height:300px; margin:0 auto; position:relative;
/*设置从何处查看一个元素的角度*/
-webkit-perspective:1200px;
perspective:1200px;
/*设置一个3D元素的基数位置*/
-webkit-perspective-origin:center center;
perspective-origin:center center;
/*让转换的子元素保留3D转换 -- preserve-3d:表示所有子元素在3D空间中呈现*/
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:scale(.8);
transform:scale(.8);
}
.roateBox{
-webkit-animation:roateBox 10s linear infinite;
animation:roateBox 10s linear infinite;
}
@-webkit-keyframes roateBox{
0%{ -webkit-transform:rotateY(0) scale(.8);}
100%{ -webkit-transform:rotateY(-360deg) scale(.8);}
}
@keyframes roateBox{
0%{ transform:rotateY(0) scale(.8);}
100%{ transform:rotateY(-360deg) scale(.8);}
}
#box img{ width:100%; height:100%; object-fit:contain; position:absolute; left:0; top:0;}
#box img:nth-child(1){ -webkit-transform:rotateY( 0deg); transform:rotateY( 0deg);}
#box img:nth-child(2){ -webkit-transform:rotateY( 45deg); transform:rotateY( 45deg);}
#box img:nth-child(3){ -webkit-transform:rotateY( 90deg); transform:rotateY( 90deg);}
#box img:nth-child(4){ -webkit-transform:rotateY(135deg); transform:rotateY(135deg);}
#btn{ width:100px; height:30px; line-height:30px; margin:20px auto; text-align:center; border-radius:5px; background-color:#ddd; cursor:pointer;}
#list{ text-align:center;}
#list img{ width:70px;}
</style>
</head>
<body>
<div id="box">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>
<div id="btn">开始旋转</div>
<div id="list">
<div>以下是上面旋转所用的图片素材<br> </div>
<div>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>
</div>
<script type="text/javascript">
document.getElementById('btn').onclick = function(){
document.getElementById('box').setAttribute('class','roateBox');
document.getElementById('btn').innerHTML = '正在旋转';
}
</script>
</body>
</html>