【过度与动画2-7】为什么这里transform分开写无效？
来源：2-7 编程练习
easyschen
2021-11-23 10:25:24
相关代码：
<!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;
/*此处写代码*/
/*transition:rotate 1s linear 0s;*/
/*transition:scale 1s linear 0s;*/
transition:all 1s linear 0s;
}
/*此处写代码*/
div:hover{
/*
为什么分开写没有效果
transform:rotate(90deg);
transform:scale(2,2);
*/
transform:rotate(360deg)scale(2,2);
}
</style>
</head>
<body>
<div>www.imooc.com</div>
</body>
</html>问题描述：
Q1: 这里transition只能作用于transform，无法作用于rotate和scale，是指transition函数只能作用于trasform函数吗？不太理解。
相关截图：
问题描述：
Q2：为什么这里tranform分开写无效
相关截图：
其他知识点：
1. transform中的元素可以写多个，并排放置。
写回答
1回答
-
同学你好，代码实现效果很棒。
针对提问回复：
1、rotate和scale是transform的属性值，不能单独使用，所以不能写在transition后面。如果想用旋转等过渡效果，需要写transform属性。transition属性后面也可以跟其他的属性，例如height，width等，需要过渡哪个样式写哪个属性即可，也可以写all 。
2、transform是一个属性，如果分开写两次，后面的会覆盖前面的。浏览器解析如下
只能实现一个效果，所以需要在一起写。
祝学习愉快！
1
相似问题