2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
语法:transform:rotate(度数);
重点:
- Rotate里面跟度数,单位是deg 比如rotate(45deg)
- 角度为正时,顺时针,负时,逆时针
- 默认旋转的中心是元素的中心点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 100px;
border-radius: 80px;
border: 3px solid pink;
/* 过渡写到本身上,谁做动画给谁加 */
transition: all 1s;
}
img:hover {
/* 顺时针旋转45度 */
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="images/gwm.jpg" alt="">
</body>
</html>
案例:三角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3书写三角</title>
<style>
.box {
position: relative;
width: 250px;
height: 35px;
border: 1px solid #000;
}
.box::after {
content: '';
position: absolute;
top: 7px;
right: 15px;
width: 10px;
height: 10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
transition: all;
}
/* 鼠标经过div 里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
设置转换中心点:transform-origin
我们可以设置元素转换的中心点
语法:tranform-origin:x y;
重点:
- 注意后面的参数x和y用空格隔开
- X y 默认转换的中心是元素的中心点(50% 50%)
- 还可以给x y设置像素 或者方位名词(top bottom left right center)
案例:旋转案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
overflow: hidden;
margin: 0 auto;
position: relative;
width: 200px;
height: 200px;
border: 1px solid pink;
transition: all 5s;
}
div::before {
content: '啊~xswl';
position: absolute;
width: 100%;
height: 200px;
background-color: aquamarine;
transform: rotate(90deg);
transform-origin: left bottom;
transition: all 1s;
}
div:hover::before {
transform: rotate(0);
}
</style>
</head>
<body>
<div></div>
</body>
</html>