CSS3实现旋转图片相册

最新推荐文章于 2022-04-16 14:53:06 发布

润桦铧骅哗烨

最新推荐文章于 2022-04-16 14:53:06 发布

阅读量962

点赞数 2

文章标签： C3动画

本文链接：https://blog.csdn.net/qq_39492840/article/details/82668279

版权

基本思路：

1.用一个div#box包含十张图片，div定位为fixed,定位的四个值全部设为0，然后margin设为0，就可以让盒子居中在中间。

2.十张图片设为绝对定位，这样3D动画的中心就会变为外盒子的中心。

3.先让图片向外推出，使用translateZ(680px)，然后设置旋转rotateX,由于旋转中心变为了盒子，因此图片会以盒子为中心而旋转，而不是以自身中轴旋转。这样就会做出图片像众星一样围绕太阳围绕盒子来旋转。

4.前面三步所有元素都是静态而非动态的，给盒子设置动画，让它沿着y轴旋转2圈，沿着x轴上下移动，就可以做到旋转相册的效果

效果如下：

HTML代码如下：

<body>
		<div id="box">
			<img src="img/1.png" alt="" />
			<img src="img/2.png" alt="" />
			<img src="img/3.png" alt="" />
			<img src="img/4.png" alt="" />
			<img src="img/5.png" alt="" />
			<img src="img/6.png" alt="" />
			<img src="img/7.png" alt="" />
			<img src="img/8.png" alt="" />
			<img src="img/9.png" alt="" />
			<img src="img/10.png" alt="" />
		</div>
	</body>

CSS代码如下

*{
				margin:0;
				padding: 0;
			}
			#box{
				width: 200px;
				height: 200px;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				transform-style: preserve-3d;/*表示所有元素在3d空间显示*/
				animation: xuanZhuan 60s linear infinite;
			}
			img{
				width: 200px;
				height:200px;
				position: absolute;
			}
			#box img:nth-child(1){/*360除以十张=36，rotateY增长36度，Z是推出680px*/
				transform: rotateY(0) translateZ(680px);
			}
			#box img:nth-child(2){
				transform: rotateY(36deg) translateZ(680px);
			}
			#box img:nth-child(3){
				transform: rotateY(72deg) translateZ(680px);
			}
			#box img:nth-child(4){
				transform: rotateY(108deg) translateZ(680px);
			}
			#box img:nth-child(5){
				transform: rotateY(144deg) translateZ(680px);
			}
			#box img:nth-child(6){
				transform: rotateY(180deg) translateZ(680px);
			}
			#box img:nth-child(7){
				transform: rotateY(216deg) translateZ(680px);
			}
			#box img:nth-child(8){
				transform: rotateY(252deg) translateZ(680px);
			}
			#box img:nth-child(9){
				transform: rotateY(288deg) translateZ(680px);
			}
			#box img:nth-child(10){
				transform: rotateY(324deg) translateZ(680px);
			}
			@keyframes xuanZhuan{
				0%{transform:rotateX(0) rotateY(0);}
				25%{transform:rotateX(20deg) rotateY(180deg);}
				50%{transform:rotateX(0deg) rotateY(360deg);}
				75%{transform:rotateX(-20deg) rotateY(540deg);}
				100%{transform:rotateX(0deg) rotateY(720deg);}
			}
			@keyframes rotate{
				from{transform: rotate(0);}
				to{transform: rotate(45deg);}
			}

润桦铧骅哗烨

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现旋转图片相册

基本思路：1.用一个div#box包含十张图片，div定位为fixed,定位的四个值全部设为0，然后margin设为0，就可以让盒子居中在中间。2.十张图片设为绝对定位，这样3D动画的中心就会变为外盒子的中心。3.先让图片向外推出，使用translateZ(680px)，然后设置旋转rotateX,由于旋转中心变为了盒子，因此图片会以盒子为中心而旋转，而不是以自身中轴旋转。这样就会做出...
复制链接

扫一扫