css3怎么设置永久旋转

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3怎么设置永久旋转相关的知识,希望对你有一定的参考价值。

参考技术A transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
代码如下:可以复制运行下试试:

<html>
<head>

<style>

body
background:#ddd;

.keleyi
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top;
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;

.keleyi:hover
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);

</style>
</head>
<body>
<div class="keleyi"></div>

</body>
</html>
参考技术B 图片?自动旋转还是鼠标经过

以上是关于css3怎么设置永久旋转的主要内容,如果未能解决你的问题,请参考以下文章

css3圆环旋转效果动画怎么做

css怎么设置图片定点旋转?

css3怎么让3d旋转的层近大远小

CSS3设置线条延伸动画,怎么从右向左延伸

CSS transform中的rotate的旋转中心怎么设置?

css3怎么设置过渡效果花费的时间