标签:html 其他属性 width ini init 影响 over 旋转 顺序
2D
转换综合写法以及顺序问题知识要点
transform: translate() rotate() scale()
代码演示
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
/* transform: rotate(180deg) translate(150px, 50px); */
/* 我们同时有位移和其他属性,我们需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
0064 2D转换综合写法以及顺序问题:translate rotate scale
标签:html 其他属性 width ini init 影响 over 旋转 顺序
原文地址:https://www.cnblogs.com/jianjie/p/12127179.html