文章目录
一、使用 transfrom-origin 设置旋转中心点
为 div 盒子模型 设置 transform: rotate 样式 , 可以使 盒子模型 围绕 中心点 进行 旋转 , 代码如下 :
/* 顺时针旋转 45 度 */
transform: rotate(45deg);
/* 设置过渡动画 */
transition: all 1s;
盒子模型 , 除了围绕中心点 旋转之外 , 还可以 设置 围绕 某个点 进行旋转 , 如 : 围绕 左下角 进行旋转 ;
使用 transfrom-origin 样式 , 可以设置 盒子模型 的 旋转中心点 ;
transfrom-origin 样式语法 :
transfrom-origin: x y;
x y 坐标之间 , 使用空格隔开 ;
x y 坐标的 默认值 是 中心点 , 也就是 ( 50% , 50% ) ;
x y 坐标的值 , 可以设置的类型 如下 :
- 百分比 : 50%
- 像素 : 10px
- 方位名词 : 可以是 top / bottom / left / right / center ;
设置完之后 , 再次使用 transform: rotate 样式时 , 就会 绕着上面指定的 x y 坐标进行旋转 ;
二、代码示例 - 使用 transfrom-origin 设置旋转中心点
1、代码示例 - 使用方位词设置旋转中心点
使用方位词设置旋转中心点 , 设置 左下角 为 旋转中心点 ;
设置 左下角为旋转中心点 ;
/* 设置旋转中心点 */
transform-origin: left bottom;
代码示例 :
<!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 2D 转换 - rotate 旋转</title>
<style>
div {
width: 200px;
height: 200px;
/* 上下 100 像素外边距, 居中对齐 */
margin: 100px auto;
background-color: pink;
/* 设置过渡动画 */
transition: all 1s;
/* 设置旋转中心点 */
transform-origin: left bottom;
}
div:hover {
/* 鼠标移动上去后 三角形超右 */
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
执行结果 :
鼠标移动上去后的效果 : 绕左下角 逆时针 旋转 45 度 ;
2、代码示例 - 使用百分比设置旋转中心点
使用方位词设置旋转中心点 , 设置 25% 25% 为 旋转中心点 ;
设置 25% 25% 位置为旋转中心点 ;
/* 设置旋转中心点 */
transform-origin: 25% 25%;
代码示例 :
<!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 2D 转换 - rotate 旋转</title>
<style>
div {
width: 200px;
height: 200px;
/* 上下 100 像素外边距, 居中对齐 */
margin: 100px auto;
background-color: pink;
/* 设置过渡动画 */
transition: all 1s;
/* 设置旋转中心点 */
transform-origin: 25% 25%;
}
div:hover {
/* 鼠标移动上去后 三角形超右 */
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
执行结果 :
鼠标移动上去后的效果 : 绕 25% 25% 位置 逆时针 旋转 45 度 ;
3、代码示例 - 使用像素值设置旋转中心点
使用方位词设置旋转中心点 , 设置 0px 0px 位置 为 旋转中心点 ;
设置 0px 0px 位置为旋转中心点 ;
/* 设置旋转中心点 */
transform-origin: 0px 0px;
代码示例 :
<!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 2D 转换 - rotate 旋转</title>
<style>
div {
width: 200px;
height: 200px;
/* 上下 100 像素外边距, 居中对齐 */
margin: 100px auto;
background-color: pink;
/* 设置过渡动画 */
transition: all 1s;
/* 设置旋转中心点 */
transform-origin: 0px 0px;
}
div:hover {
/* 鼠标移动上去后 三角形超右 */
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
执行结果 :
鼠标移动上去后的效果 : 绕 0px 0px 位置 逆时针 旋转 45 度 ;
