2D—旋转下拉三角案例
今天要分享的是一个旋转的小案例------------>biubiu~
语法：
tranform: rotate(20deg);
1、单位是deg
2、正值顺时针方向旋转,负值逆时针方向旋转
3、默认以中心点旋转
接下来就是案例啦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转下拉三角案例</title>
<style>
.box {
height: 30px;
width: 200px;
border: 1px solid #000;
position: relative;
}
.box::before {/*伪元素：行内元素，只能用于双标签。常用于做（引入）小图标*/
content:"";/*这个属性必写项*/
width: 10px;
height: 10px;
position: absolute;
top: 5px;
right: 5px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(45deg);
transition: all 0.3s;
}
/* .box::before:hover 伪元素后面不能跟伪类，这是错误格式，不会报错，但是不生效 */
.box:hover::before {
transform: rotate(225deg);
/* 旋转的度数基于原本的状态变化的 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
