关于3-2编程题

老师，不知道为什么，我的这个旋转无法实现

<!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;

/*此处写代码*/

transform:rotate(0deg);

transform: scale(1,1);

-webkit-transition-property:transform 2s linear 1s;

-moz-transition-property:transform 2s linear 1s;

-ms-transition-property:transform 2s linear 1s;

-o-transition-property:transform 2s linear 1s;

transition-property:transform 2s linear 1s;

}

/*此处写代码*/

div:hover{

transform:rotate(360deg);

transform: scale(2,2);

-webkit-transition-property:transform 2s linear 1s;

-moz-transition-property:transform 2s linear 1s;

-ms-transition-property:transform 2s linear 1s;

-o-transition-property:transform 2s linear 1s;

transition-property:transform 2s linear 1s;

}

</style>

</head>

<body>

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

</body>

</html>

慕雪1434180 2018-01-20

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

收起

2回答

卡布琦诺回答被采纳获得+3积分 2018-01-21 15:25:22

收起回答

慕雪1434180 提问者 #1

非常感谢！

2018-01-25 17:06:43

卡布琦诺 2018-01-21 13:53:42

transition-property定义的是你要改变的css属性名，譬如width/height等,儿你这里是需要定义旋转，因此不需要写transition-property这个属性，且transition-property属性后面只能写需要变换的css属性，不可以在写其他的

希望可以帮到你~

收起回答

提问者慕雪1434180 #1

谢谢老师，但是我改变之后，还是不能旋转，很奇怪，只能实现缩放效果，而他的旋转无法实现？代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3-1作业</title> <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; /*此处写代码*/ transform:rotate(0deg); transform: scale(1,1); -webkit-transition:transform 2s linear 1s; -moz-transition:transform 2s linear 1s; -ms-transition:transform 2s linear 1s; -o-transition:transform 2s linear 1s; transition:transform 2s linear 1s; } /*此处写代码*/ div:hover{ transform:rotate(360deg); transform: scale(2,2); -webkit-transition:transform 2s linear 1s; -moz-transition:transform 2s linear 1s; -ms-transition:transform 2s linear 1s; -o-transition:transform 2s linear 1s; transition:transform 2s linear 1s; } </style> </head> <body> <div>www.imooc.com</div> </body> </html>

2018-01-21 15:11:48
qq_怺芣訁棄_0 回复提问者慕雪1434180 #2

我把你的代码稍微改动了下，你试下应该可以实现效果了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3-1作业</title> <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; /*此处写代码*/ transform: rotate(0deg) scale(1,1); -webkit-transition:transform 2s linear 1s; -moz-transition:transform 2s linear 1s; -ms-transition:transform 2s linear 1s; -o-transition:transform 2s linear 1s; transition:transform 2s linear 1s; } /*此处写代码*/ div:hover{ transform:rotate(360deg) scale(2,2); -webkit-transition:transform 2s linear 1s; -moz-transition:transform 2s linear 1s; -ms-transition:transform 2s linear 1s; -o-transition:transform 2s linear 1s; transition:transform 2s linear 1s; } </style> </head> <body> <div>www.imooc.com</div> </body> </html>

2018-01-29 10:21:07