老师 旋转变形的属性值是rotate为什么这里写一样的代码效果显示不出来
来源：2-7 编程练习
槑大槑小
2020-12-22 16:10:57
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码
<!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: ratate(0deg);
transition: all 1s linear 0s;
}
/*此处写代码*/
div:hover {
height: 100px;
width: 400px;
font-size: 18px;
line-height: 100px;
transform: scale(1) rotate(360deg);
}
</style>
</head>
<body>
<div>www.imooc.com</div>
</body>
</html>
，可通过选择【代码语言】突出显示
1回答
-
同学你好，问题解答如下
1、同学的rotate写错了，写成了ratate,如下图：
2、鼠标移入div时，没有旋转效果。原因是hover前后，div的transform样式设置不一致，建议做如下调整：
使用transition过渡时，过渡的属性，初始状态和结束状态要设置一致；以我们这个题为例，transform属性有过渡效果，如果在.div上设置了 transform: scale() rotate();，那么在hover中也要设置 transform: scale() rotate();这样效果才正确。
祝学习愉快！
0
相似问题