旋转木马案例

最新推荐文章于 2024-08-03 20:32:29 发布

muziguoguo

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量94

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/muziguoguo/article/details/132624949

版权

实现旋转木马效果，定义框架结构如下：

1.有一个大盒子，section

2.里面放6个盒子，div，div里放背景图片。

3.通过定位将所有盒子定位在一起，至于父盒子中。

4.摆放盒子，将6个盒子，按旋转木马的样式进行摆放，6个盒子围成一圈：

第一个图片沿z轴前移300px，角度不变

第二张图片沿Y轴正向旋转60度，沿Z轴前移300px

第三、四、五、六张图片，分别沿Y轴旋转120，180 ，240，300度后前移300px，这样六张图片即可实现立体环绕效果。

这里注意：移动摆放盒子，要想看到立体效果，需要给父盒子section加3d呈现，同时给父盒子body加透视，透视是为了移动和旋转的盒子实现近大远小效果。

5.盒子摆放好后，定义动画效果，这里动画是沿Y轴进行旋转的，所以定义动画初始Y轴旋转0度，结束动画Y轴旋转360度

6.调用动画，实现动画效果

7.最后可设置当鼠标经过盒子的时候，停止动画。animation-play-state: paused;

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 定义外部盒子大小，屏幕居中 */
			body {
				/* 想要前移或者旋转的图片有效果，需要在父盒子里加透视，因为section也要实现旋转的效果，所以透视加在body上。 */
				perspective: 800px;
			}

			section {
				position: relative;
				width: 300px;
				height: 200px;
				margin: 200px auto;
				/* 控制子元素，那6张图片，是否开启3D立体空间，这里给父盒子写，影响子盒子 */
				transform-style: preserve-3d;
				/* section盒子调用动画 */
				animation: rotate 5s linear infinite;
			}
			/* 6张图片调整好位置后，给section定义动画效果 ,让section这个盒子沿Y轴进行旋转，初始0度，结束360度*/
			@keyframes rotate{
				from{transform: rotateY(0);}
				to{transform: rotateY(360deg);}
			}
			/* 设置当鼠标经过section盒子的时候，停止旋转 */
			section:hover {
				animation-play-state: paused;
			}

			/* 定义子盒子大小，这里跟父盒子一样大，同时将所有子盒子定位在父盒子中，插入背景图 */
			section div {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url(images/dog.jpg) no-repeat;
			}

			/* 下面定义每个子盒子的移动及旋转的角度，将6个图片排放在不同角度，围成一圈。 */

			section div:nth-child(1) {
				/* 第一张图片不旋转，沿z轴前移300px */
				transform: translateZ(300px);
			}
			section div:nth-child(2) {
				/* 第二张图片需沿Y轴正向旋转60度，然后再移动300px,这里需要先旋转在移动，所以移动写在后面，旋转在前 */
				transform: rotateY(60deg) translateZ(300px);
			}
			section div:nth-child(3) {
				/* 第三张图片需沿Y轴正向旋转120度，然后再移动300px*/
				transform: rotateY(120deg) translateZ(300px);
			}
			section div:nth-child(4) {
				/* 第四张图片需沿Y轴正向旋转180度，然后再移动300px*/
				transform: rotateY(180deg) translateZ(300px);
			}
			section div:nth-child(5) {
				/* 第四张图片需沿Y轴正向旋转240度，然后再移动300px*/
				transform: rotateY(240deg) translateZ(300px);
			}
			section div:nth-child(6) {
				/* 第四张图片需沿Y轴正向旋转300度，然后再移动300px*/
				transform: rotateY(300deg) translateZ(300px);
			}
		</style>
	</head>
	<body>
		<!-- 旋转木马框架结构，一个外部大盒子，里面放6个盒子里面放图片 -->
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>

	</body>
</html>