CSS3设置元素显示3D效果

显示效果：
以下是图片素材
以下是页面代码部分
<!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>&nbsp;</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>
CSS3设置元素显示3D效果

猜你喜欢
