关于rotate实现360旋转

<!DOCTYPE html>

<html>

<head>

<style>

div {

font-size: 14px;

font-weight: bold;

line-height: 50px;

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 200px;

height: 50px;

margin: auto;

cursor: pointer;

text-align: center;

background: #abcdef;

/*此处写代码*/

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

-webkit-transition:transform 2s ease-in-out 0.5s;

-moz-transition:transform 2s ease-in-out 0.5s;

-ms-transition:transform 2s ease-in-out 0.5s;

-o-transition:transform 2s ease-in-out 0.5s;

transition:transform 2s ease-in-out 0.5s;

}

/*此处写代码*/

div:hover{

-webkit-transform: rotate(360deg) scale(2);

-moz-transform: rotate(360deg) scale(2);

-ms-transform: rotate(360deg) scale(2);

-o-transform: rotate(360deg) scale(2);

transform: rotate(360deg) scale(2);

cursor:pointer;

-webkit-transition:transform 2s ease-in-out 0.5s;

-moz-transition:transform 2s ease-in-out 0.5s;

-ms-transition:transform 2s ease-in-out 0.5s;

-o-transition:transform 2s ease-in-out 0.5s;

transition:transform 2s ease-in-out 0.5s;

}

</style>

</head>

<body>

<div>www.imooc.com</div>

</body>

</html>

不能实现360旋转，没有旋转效果

紫沐丶 2017-02-12

源自：CSS3过渡 3-1 transition简写

收起

1回答

rsrg 回答被采纳获得+3积分 2017-02-12 19:47:26

hover里写了scale(2) 那么在div就要写scale(1) 对应起来

收起回答

aparch #1

为什么要对应起来？我也遇到了这个问题，按照你说的方法，结果就有旋转效果了

2017-02-24 19:02:10
rsrg 回复 aparch #2

就相当于给它一个起点比如 rotate(0deg) 》rotate(360deg)

2017-02-24 20:06:44
aparch 回复 rsrg #3

非常谢谢！

2017-02-24 20:36:45