首页 > 其他分享> > Jquery 实现图片水平旋转效果

Jquery 实现图片水平旋转效果

2022-02-23 15:59:16 作者：互联网

前言

最近在写前端的时候，有这么一个需求就是前端页面都是静态的，看上去比较呆，要求加上一点动态效果。。于是乎做了一个首页旋转的效果

实现

这个地方我就直接放源码的实现了，其实主要就是设置一下他 X Y 轴的旋转，以及旋转速度

## 旋转属性
animation: rotationY 10s infinite linear;
transform: rotate(360deg);

@keyframes rotationY {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}

上边这是比较关键的一部分源码，大概的意思就是，设置了一下旋转速度和旋转方向，这个是顺时针的哈
完整代码如下

<html>

<head>
    <meta charset='utf8' />
    <style type='text/css'>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: lightseagreen;
        }

        .btn {
            animation: rotationY 10s infinite linear;
			transform: rotate(360deg);
        }
	
		@keyframes rotationY {
			from {
			  transform: rotateY(0deg);
			}
			to {
			  transform: rotateY(360deg);
			}
		  }
    </style>

</head>

<body>
    <img class="btn" src="https://ci.xiaohongshu.com/ae7f7ec9-8720-56a3-b2c6-5b6c5aa7434d?imageView2/2/w/540/format/jpg">
</body>
</html>

实现效果的话，可以在桌面创建一个 html 文件，把源码复制进去直接打开，查看效果，这个地方就不再单独放上去了

标签：Jquery,rotationY,transform,旋转,rotateY,源码,360deg,图片
来源： https://blog.csdn.net/qq_36537546/article/details/122937070