使用rotate
实现元素旋转效果
语法:transform:rotate(j角度)
角度的单位是
deg
,角度可以正值可以负值,正值顺时针,负值逆时针
注意:测试旋转必须要有过渡的属性
样例代码
<!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>旋转效果</title>
<style>
img {
width: 250px;
transition: all 2s;
}
img:hover {
/* 顺 */
transform: rotate(360deg);
/* 逆 */
/* transform: rotate(-360deg); */
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>
使用transform-origin
属性改变转换原点,默认原点是盒子的中心点
语法:transform-origin:原点的水平位置 原点的垂直位置
取值:
- 方位名词(left、top、right、bottom、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>转换原点</title>
<style>
img {
width: 250px;
border: 1px solid #000;
transition: all 2s;
transform-origin: right bottom;
transform-origin: left bottom;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>
使用rotate
实现元素空间旋转效果
语法:transform:rotateZ(值)
注意:rotateZ
默认效果和rotate
平面旋转默认原点的效果是一样的
其他:
transform:rotateX(值)
transform:rotateY(值)
在实现空间旋转效果时,建议添加
perspective
属性,实现进大远小的效果,使其看起来更加真实