css3怎么设置永久旋转

html-css09

css3怎么设置永久旋转,第1张

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>

使用css3 属性方法 rotate() 实现旋转

transform-origin是规定如何旋转

: center center；为以围绕中心点旋转；

top left以围绕左上角旋转；

top right以围绕右上角旋转；