关于rotate实现360旋转

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

关于rotate实现360旋转

来源：3-1 transition简写

紫沐丶

2017-02-12 17:11:57

<!DOCTYPE html>

<html>

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

/*此处写代码*/

-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旋转，没有旋转效果

写回答

1回答

rsrg

rsrg

2017-02-12

已采纳

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

1

hparch

回复

hsrg

h 非常谢谢！

h017-02-24

共3条回复

0 学习 · 5760 问题

相似问题

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

回答 2

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

回答 3

鼠标经过，不会旋转

回答 2

旋转中缩放的变化

回答 1

关于旋转，设置了transform: rotate(0deg);起始值反而效果就不对了？

回答 1

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