为什么无法实现360度旋转？

首页课程实战体系课手记专栏慕课教程

为什么无法实现360度旋转？

来源：3-1 transition简写

web_東

2017-03-09 05:41:54

<!DOCTYPE html>

<html>

<head>

<style>

div {

font-size: 14px;

font-weight: bold;

line-height: 50px;

position:absolute;

top:50%;

right: 0;

bottom: 0;

left: 0;

width: 200px;

height: 50px;

margin: 0 auto 0;

text-align: center;

background: #abcdef;

/*此处写代码*/

/* cursor: pointer;*/

/* -webkit-transform:rotate(0deg);*/

transform:rotate(0deg);

/* -webkit-transform:scale(1);*/

transform:scale(1);

/* -webkit-transition-property:transform;*/

transition-property:transform;

/* -webkit-transition-duration:1s;*/

transition-duration:1s;

/* -webkit-transition-timing-function:ease-in-out;*/

transition-timing-function:ease-in-out;

/* -webkit-transition-delay:0s;*/

transition-delay:0s;

}

/*此处写代码*/

div:hover {

/* -webkit-transform:rotate(90deg);*/

transform:rotate(360deg);

/* -webkit-transform:scale(2);*/

transform:scale(2);

cursor: pointer;

/* -webkit-transition-property:transform;*/

transition-property:transform;

/* -webkit-transition-duration:2s;*/

transition-duration:2s;

/* -webkit-transition-timing-function:ease-in-out;*/

transition-timing-function:ease-in-out;

/* -webkit-transition-delay:0s;*/

transition-delay:0s;

}

</style>

</head>

<body>

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

</body>

</html>

写回答

3回答

web_東

提问者

2017-03-15

transform：rotate（？deg） scale（？deg）；两个属性一起写，360度可以有旋转的效果。

Hbrsql

2017-03-09

transform:rotate(?deg);
transform:scale(?); //会覆盖掉上面的transform. 两个属性应一起写:transform:rotate(?deg) scale(?);

div{transform:rotate(0deg);}
div:hover{transform:rotate(360deg);} //应为360deg的位置跟0deg的位置是一样的,所以没有旋转效果.

web_東

提问者

2017-03-09

解决啦，换一个webstorm编辑器皆可以啦，

hbrsql

h 代码没改的话,换成webstorm编辑器就可以?

h017-03-09

共1条回复

0 学习 · 5760 问题

查看课程

相似问题

鼠标经过，不会旋转

回答 2

关于rotate实现360旋转

回答 1

为什么我的代码不能旋转360度？？？

回答 2

为什么无法实现360度旋转？

回答 1

旋转中缩放的变化

回答 1

打开慕课网App查看更多内容