043_CSS32D转换

最新推荐文章于 2022-07-18 10:01:56 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-07-18 10:01:56 发布

阅读量315

点赞数

分类专栏： css学习文章标签： css css3 web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109148962

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1. 通过CSS3的transform属性像元素应用2D或3D转换。该属性允许我们对元素进行移动、缩放、旋转、倾斜。

2. Transform 2D方法

3. translate(x,y)、translateX(x)、translateY(y)方法

3.1. translate(x,y)定义2D转换, 从当前位置沿着X和Y轴移动元素。

3.2. translateX(x)定义2D转换, 从当前位置沿着X轴移动元素。

3.3. translateY(y)定义2D转换, 从当前位置沿着Y轴移动元素。

3.4. 例子

3.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3 2D移动</title>
		<meta charset="utf-8" />

		<style type="text/css">
			#translate img:hover {
				transform: translate(50px, 20px);
			}
			#translateX img:hover {
				transform: translateX(50px);
			}
			#translateY img:hover {
				transform: translateY(20px);
			}
		</style>
	</head>
	<body>
		<div id="translate">
			<p>translate(x,y)定义2D转换, 从当前位置沿着X和Y轴移动元素。</p>
			<img src="flower.jpg" alt="flower.jpg" />
		</div>
		<div id="translateX">
			<p>translateX(x)定义2D转换, 从当前位置沿着X轴移动元素。</p>
			<img src="flower.jpg" alt="flower.jpg" />
		</div>
		<div id="translateY">
			<p>translateY(y)定义2D转换, 从当前位置沿着Y轴移动元素。</p>
			<img src="flower.jpg" alt="flower.jpg" />
		</div>
	</body>
</html>

3.4.2. 效果图

4. rotate(angle)方法

4.1. rotate(angle)根据给定的角度顺时针或逆时针旋转元素。使用正值将顺时针旋转元素。使用负值将逆时针旋转元素。

4.2. 例子

4.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3 2D旋转</title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			div {
				margin-left: 30px;
			}
			#rotateClockwise img:hover {
				transform: rotate(30deg);
			}
			#rotateAnticlockwise img:hover {
				transform: rotate(-30deg);
			}
		</style>
	</head>
	<body>
		<div id="rotateClockwise">
			<p>rotate(angle)使用正值将顺时针旋转元素。</p>
			<img src="flower.jpg" alt="flower.jpg" /> 
		</div>
		<div id="rotateAnticlockwise">
			<p>rotate(angle)使用负值将逆时针旋转元素。</p>
			<img src="flower.jpg" alt="flower.jpg" /> 
		</div>
	</body>
</html>

4.2.2. 效果图

5. scale(x,y)、scaleX(x)、scaleY(y)方法

5.1. scale(x,y)定义2D缩放转换, 改变元素的宽度和高度。设置元素宽度为其原始宽度的x倍, 同时设置元素高度为其原始高度的y倍。

5.2. scaleX(x)定义2D缩放转换, 改变元素的宽度。设置元素宽度为其原始宽度的x倍。

5.3. scaleY(y)定义2D缩放转换, 改变元素的高度。设置元素高度为其原始高度的y倍。

5.4. 例子

5.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3 2D缩放</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div {
				margin-left: 100px;
			}
			#scale img:hover {
				transform: scale(2,2);
			}
			#scaleX img:nth-child(2):hover {
				transform: scaleX(2);
			}
			#scaleX img:last-child:hover {
				transform: scaleX(-1);
			}
			#scaleY img:nth-child(2):hover {
				transform: scaleY(2);
			}
			#scaleY img:last-child:hover {
				transform: scaleY(-1);
			}
		</style>
	</head>
	<body>
		<div id="scaleX">
			<p>scaleX(x)定义2D缩放转换, 改变元素的宽度。设置元素宽度为其原始宽度的x倍。</p>
			<img src="flower.jpg" alt="flower.jpg" /> <img src="flower.jpg" alt="flower.jpg" />
		</div>
		<div id="scaleY" style="margin-top: 50px; margin-bottom: 50px;">
			<p>scaleY(y)定义2D缩放转换, 改变元素的高度。设置元素高度为其原始高度的y倍。</p>
			<img src="flower.jpg" alt="flower.jpg" /> <img src="flower.jpg" alt="flower.jpg" />
		</div>
		<div id="scale">
			<p>scale(x,y)定义2D缩放转换, 改变元素的宽度和高度。设置元素宽度为其原始宽度的x倍, 同时设置元素高度为其原始高度的y倍。</p>
			<img src="flower.jpg" alt="flower.jpg" />
		</div>
	</body>
</html>

5.4.2. 效果图

6. skew(x-angle,y-angle)、skewX(angle)、skewY(angle)方法

6.1. skew(x-angle,y-angle)定义2D倾斜转换, 使元素沿X和Y轴倾斜给定角度。如果未指定第二个参数, 则值为零。

6.2. skewX(angle)定义2D倾斜转换, 使元素沿X轴倾斜给定角度。

6.3. skewY(angle)定义2D倾斜转换, 使元素沿Y轴倾斜给定角度。

6.4. 例子

6.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3 2D倾斜</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div {
				margin: 20px 60px;
			}
			#skew img:hover	{
				transform: skew(30deg,20deg);
			}
			#skewX img:hover {
				transform: skewX(30deg);
			}
			#skewY img:hover {
				transform: skewY(20deg);
			}
		</style>
	</head>
	<body>
		<div id="skew">
			<p>skew(x-angle,y-angle)定义2D倾斜转换, 使元素沿X和Y轴倾斜给定角度。如果未指定第二个参数, 则值为零。</p>
			<img src="flower.jpg" alt="flower.jpg" />
		</div>
		<div id="skewX">
			<p>skewX(angle)定义2D倾斜转换, 使元素沿X轴倾斜给定角度。</p>
			<img src="flower.jpg" alt="flower.jpg" />
		</div>
		<div id="skewY">
			<p>skewY(angle)定义2D倾斜转换, 使元素沿Y轴倾斜给定角度。</p>
			<img src="flower.jpg" alt="flower.jpg" />
		</div>
	</body>
</html>

6.4.2. 效果图

7. matrix(n,n,n,n,n,n)方法

7.1. matrix()方法把所有2D变换方法组合为一个。

7.2. matrix()方法可接受六个参数, 其中包括数学函数, 这些参数使您可以旋转、缩放、移动(平移)和倾斜元素。参数如下: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

7.3. 例子

7.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3 2D变换方法组合</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div {
				background: #FFF0F0;
				height: 200px;
				width: 800px;
			}
			img {
				margin-left: 100px;
			}
			#matrix img {
				transform: matrix(1, 0, 0.6, 1, 0, 0);
			}
		</style>
	</head>
	<body>
		<div>
			<p>原始图片:</p>
			<img src="flower.jpg" alt="flower.jpg" /> 
		</div>
		
		<div id="matrix">
			<p>参数如下: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())</p>
			<img src="flower.jpg" alt="flower.jpg" /> 
		</div>
	</body>
</html>

7.3.2. 效果图