这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战
上一篇文章中我们已经学习了css 2D转换中translate、rotate和scale的一些基本语法， 下面就结合上一篇中所学习的知识做一些小案例
rotate案例
利用div+css制作下拉框小三角
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style>
div{
position: relative;
width: 300px;
height: 35px;
border:1px solid pink;
/* transform:translate(200px,200px); */
}
div::after{
content: "";
position:absolute;
width: 8px;
height: 8px;
top:12px;
right:15px;
border-right: 1px solid pink;
border-bottom: 1px solid pink;
/* 設置過度，誰做動畫給誰加 */
transition:all 0.3s;
transform: rotate(45deg)
}
div:hover::after{
transform:rotate(225deg);
top:15px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transform-origin案例 设置旋转中心
当鼠标悬浮到div上时，div以左下角为旋转中心旋转360度
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style>
div{
width: 200px;
height: 200px;
margin:100px auto;
background-color: pink;
/* 設置左下角為旋轉中心 */
transform-origin: left bottom;
/* 設置過度動畫 */
transition: all 1s;
}
div:hover{
transform:rotate(360deg)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
scale案例
鼠标悬浮上去放大2倍，鼠标离开后缩回原大小
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style>
div{
width: 200px;
height: 200px;
margin:100px auto;
background-color: pink;
/* 設置左下角為旋轉中心 */
/* transform-origin: left bottom; */
/* 設置過度動畫 */
transition: all 1s;
}
div:hover{
transform:scale(2,2)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2D转换综合写法示例代码
当鼠标悬浮先向右移动150px，再向下移动100px，然后旋转360度，最后再放大2倍
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.8s;
}
div:hover {
transform: translate(150px, 100px) rotate(360deg) scale(2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
