旋转轮插图

最新推荐文章于 2021-06-04 19:29:07 发布

时松

最新推荐文章于 2021-06-04 19:29:07 发布

阅读量316

点赞数

分类专栏：基础文章标签：旋转

本文链接：https://blog.csdn.net/ice_yr/article/details/102989680

版权

基础专栏收录该内容

79 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* body {
				perspective: 1000px;
			}
			div {
				width: 100px;
				height: 145px;
				border: 5px solid red;
				margin: 100px auto;
				transform: rotateY(30deg);
				transform-style: preserve-3d;   让父盒子里的子盒子以3d效果显示 
			}
			div img {
				transform: rotateY(30deg);
				border: 5px solid skyblue;
			} */
			body {
				perspective: 1000px;
				background: gainsboro;
				/* background: black; */
			}
			section {
				width: 300px;
				height: 200px;
				margin: 100px auto;
				background: url(7.png) no-repeat;
				/* -webkit-background-size: auto; */
				 background-size: cover;
				 position: relative; 
				 /* border: 10px solid blue; */
				 transform-style: preserve-3d;   /* 重要!!!!!!!!!!! */
				   /* 父盒子里子盒子3d效果显示 */
				 transition: all 25s linear; /* 匀速 all是可以省略的，省略默认的是all */
				 /* 谁做动画给谁加过渡 */
			}
			section:hover {
				transform: rotateY(360deg);
			}
			section div {
				width: 100%;
				height: 100%;
				background: url(6.png) no-repeat;
				background-size: cover;
				position: absolute; 
				top: 0;
				left: 0;
			}
			section div:nth-child(1) {
				transform: rotateY(0deg) translateZ(400px);  /* Z旋转木马 */
				/* translateZ()  近大远小 */
			}
			section div:nth-child(2) {
				transform: rotateY(60deg) translateZ(400px);
			}
			section div:nth-child(3) {
				transform: rotateY(120deg) translateZ(400px);
			}
			section div:nth-child(4) {
				transform: rotateY(180deg) translateZ(400px);
			}
			section div:nth-child(5) {
				transform: rotateY(240deg) translateZ(400px);
			}
			section div:nth-child(6) {
				transform: rotateY(300deg) translateZ(400px);
			}
		</style>
	</head>
	<body>
		<!-- <div>
			<img src="7.png" alt="" width="300px" height="400px">
		</div> -->
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>