为什么这么写，鼠标滑过的时候只会放大而不会旋转

来源：3-3 编程练习

qq_云水边静沐暖阳_04205942

2018-04-12 17:15:12

这么写鼠标滑过只会放大却不旋转，transform: scale(2) rotate(180deg);而我把360改成180就会旋转，或者把两个分开transform: scale(2);transform: rotate(360deg);这样才会一边变大一边旋转，想不明白

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

-webkit-transition: transform 1s ease 1s;

-moz-transition: transform 1s ease 1s;

-ms-transition: transform 1s ease 1s;

-o-transition: transform 1s ease 1s;

transition: transform 1s ease 1s;

}

div:hover{

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

-webkit-transition: transform 1s ease 1s;

-moz-transition: transform 1s ease 1s;

-ms-transition: transform 1s ease 1s;

-o-transition: transform 1s ease 1s;

transition: transform 1s ease 1s;

}

</style>

</head>

<body>

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

</body>

</html>

写回答

1回答

怎么都被占用了呢

2018-04-12

已采纳

过渡的设置，最好前后一致，如下：

hq_云水边静沐暖阳_04205942

h 这样的话就解决了谢谢

h018-04-12

共1条回复

0 学习 · 5760 问题

查看课程

相似问题

鼠标经过，不会旋转

回答 2

为什么预览时会出现卡顿现象？

回答 2

为什么我写的transition-duration，只有在鼠标放上去的时候有用，鼠标移开的时候没有。

回答 1

为什么取消ease-in-out就可以旋转，有这个值的时候就不行呢？

回答 1

为什么只显示放大效果不显示rotate呢？

回答 1

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