浅谈CSS3新特性——transform: rotate（旋转） | scale（缩放） | translate（移动） | skew（倾斜）

最新推荐文章于 2024-03-12 13:32:46 发布

筱葭

最新推荐文章于 2024-03-12 13:32:46 发布

阅读量2.4k

点赞数 1

分类专栏： CSS 文章标签： CSS3 rotate scale translate skew

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/54016983

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

1、CSS3 transform属性

应用于2D或3D转换，允许对元素进行倾斜、移动、缩放或旋转。

2D转换元素能够改变元素 x 和 y 轴，3D转换元素还能改变其 Z 轴。

属性：

translate(x,y)	定义2D移动
translate3d(x,y,z)	定义3D移动
translateX(x)	定义x轴的移动
translateY(x)	定义y轴的移动
translateZ(x)	定义z轴的3D移动
scale(x,y)	定义2D缩放
scale3d(x,y,z)	定义3D缩放
scaleX(x)	通过设置x轴的值定义缩放
scaleY(x)	通过设置y轴的值定义缩放
scaleZ(x)	通过设置z轴的值定义3D缩放
rotate(angle)	定义2D旋转
rotate3d(x,y,z,angle)	定义3D旋转
rotateX(angle)	定义沿着x轴的3D旋转
rotateY(angle)	定义沿着y轴的3D旋转
rotateZ(angle)	定义沿着z轴的3D旋转
skew(x-angle,y-angle)	定义沿着x和y轴的2D倾斜
skewX(angle)	定义沿着x轴的2D倾斜
skewY(angle)	定义沿着y轴的2D倾斜
none	定义不进行转换

2、CSS3 transform-origin属性

元素转换的中心点默认为元素中心点的位置，使用transform-origin属性可以改变转换中心点的位置。

2D转换元素能够改变转换中心点的 x 和 y 轴位置，3D转换元素还能改变转换中心点的Z 轴位置。

必须与transform属性一同使用。

语法：transform-origin : x-axis y-axis z-axis

默认：transform-origin : 50% 50% 0

x-axis和y-axis可能的值：left | center | right | 数值(px) | 百分比(%)

z-axis可能的值：数值(px)

eg：倾斜

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			#square{
				background:blue;
				width:200px;
				height:200px;
				position:absolute;
				left:100px;
				top:100px;
				transform:skew(5deg, 5deg);
			}
		</style>
	</head>
	<body>
		<div id="square"></div>
	</body>
</html>

eg：移动

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			#square{
				background:blue;
				width:200px;
				height:200px;
				position:absolute;
				left:0;
				top:0;
				transform:translate(50px, 50px);
			}
		</style>
	</head>
	<body>
		<div id="square"></div>
	</body>
</html>

eg：缩放

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			#circle{
				background:blue;
				width:200px;
				height:200px;
				border-radius:50%;
				position:absolute;
				left:100px;
				top:100px;
				transform:scale(0.5, 2);
			}
		</style>
	</head>
	<body>
		<div id="circle"></div>
	</body>
</html>

eg：旋转

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			#circle{
				background:blue;
				width:200px;
				height:200px;
				border-radius:50%;
				position:absolute;
				left:100px;
				top:100px;
			}
			#track{
				width:300px;
				height:300px;
				border:1px solid grey;
				border-radius:50%;
				position:absolute;
				left:50px;
				top:50px;
			}
			#plane{
				width:60px;
				height:30px;
				background:grey;
				border-radius:10px;
				position:absolute;
				left:170px;
				top:35px;
				transform-origin:center 165px;
				transform:rotate(45deg);
			}
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="track"></div>
		<div id="plane"></div>
	</body>
</html>

筱葭

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浅谈CSS3新特性——transform: rotate（旋转） | scale（缩放） | translate（移动） | skew（倾斜）

1、CSS3 transform属性应用于2D或3D转换，允许对元素进行旋转、缩放、移动或倾斜。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。translate(x,y) 定义 2D 转换。测试translate3d(x,y,z) 定义 3D 转换。 translateX(x) 定义转换，只是用 X 轴的值。测试tra
复制链接

扫一扫