[CSS]-9-平移与变形

引言

这篇文章主要介绍css3新增的transform属性。

文章目录

0×1.元素平移

让元素在页面显示中产生位移有很多方法,可以利用块状元素合模型,也可以利用相对和绝对坐标,这一小节给大家介绍css提供的两个元素移动属性:vertical-align和transform;transform为css3标准提供的新属性。

a.内联元素垂直平移

内联元素的平移遵循下面的法则:

默认情况下,元素移动,负值往下,正值往上;
如果默认基线在上面,用负数;
如果默认基线在下面,用正值;

下面用一个实例来演示上面这三条法则:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>内联元素垂直平移实例</title>

						<style type="text/css">
							<!--设置div的宽高背景色-->
							#d1{
								width: 250px;
								height: 150px;
								background-color: pink;
								color: black;
							}
							<!--默认情况下div中span的基准线在上方,所以使用负值让div中的span元素往下移动50px-->
							#d1 span{
								vertical-align: -50px;
							}
							<!--不允许调整textarea大小-->
							#tx1{
								resize: none;
							}
							<!--在textarea文本框前面的span,默认基准线在下方(与textarea的底部对齐),所以使用正值,让span标签往上移动35px-->
							#sp1{
								vertical-align: 35px;
							}
						</style>
					</head>
					<body>
						<div id="d1">
							<span>www.qingsword.com</span>
						</div>
						<br>
						<span id="sp1">自我介绍:</span><textarea name="myself" id="tx1" cols="10" rows="5"></textarea>
					</body>
					</html>
					

显示效果:

www.qingsword.com

自我介绍:

b.块状元素平移

所有内联元素都可以使用display属性转换成块状元素,然后使用本节内容介绍的平移方法,transform属性是css3提供的新属性,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>块状元素平移实例</title>

						<style type="text/css">
							#d1{
								width: 250px;
								height: 250px;
								background-color: pink;
							}
							<!--未设置平移前,d2应该紧贴着d1上左边框,本例让d2往右偏移50px,往下偏移100px(如果是负值就是往反方向),若是想单独设置一个方向上的平移,可以将不需要设置的方向上的值用0px代替,例如transform:translate(50px,0px);,除此之外css还提供了两个子属性translateX和translateY,分别用于设置X方向(左右,正右负左)和Y方向(上下,正下负上)上的偏移量。-->
							#d2{
								background-color: green;
								width: 50px;
								height: 50px;
								transform:translate(50px,100px);
							}
						</style>
					</head>
					<body>
						<div id="d1">
							<div id="d2"></div>
						</div>
					</body>
					</html>
					

显示效果:

0×2.元素变形

a.等比例缩放

等比例缩放能够使元素等比扩大或缩小我们设定的倍数,语法如下:

transform: scale(n);
n默认为1,元素保持正常大小显示,超过1就是等比扩大多少倍(长宽同时扩大),小于1就是等比缩小多少倍;

除此之外,同translate一样,scale也可以单独设置某一条边的缩放,scaleX(n)单独扩大或缩小元素宽度,scaleY(n)单独扩大或缩小元素高度。

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>块状元素缩放实例</title>

						<style type="text/css">
							<!--d1的原始宽高是100px,默认情况下会显示一个正方形,现在使用scale将其宽度扩充2倍,高度缩小成原来的一半,这种缩放或扩充会影响到其内部的所有元素-->
							#d1{
								width: 100px;
								height: 100px;
								background-color: pink;
								transform:scale(2,0.5);
								color:black;
							}
						</style>
					</head>
					<body>
						<div id="d1">www.qingsword.com</div>
					</body>
					</html>
					

显示效果:

www.qingsword.com

b.旋转

块状元素的旋转可以通过transform的rotate值来实现,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>块状元素旋转实例</title>

						<style type="text/css">
							<!--将d1顺时针旋转45度,如果要逆时针旋转,设置成负值即可-->
							#d1{
								width: 100px;
								height: 100px;
								background-color: pink;
								transform:rotate(45deg);
							}
						</style>
					</head>
					<body>
						<div id="d1"></div>
					</body>
					</html>
					

显示效果:

默认情况下,元素旋转的基准点为块状元素的中心点,可以通过设置transform-origin属性来改变旋转的基准点位置,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>设置旋转基准点实例</title>

						<style type="text/css">
							#d1{
								width: 50px;
								height: 50px;
								margin: 20px;
								background-color: pink;
								transform:rotate(30deg);
							}
							<!--设置基准点为div左上角原点(top left),默认为transform-origin:center center;即中心点,图形基准点位置保持不变,绕着基准点旋转;-->
							#d2{
								width: 50px;
								height: 50px;
								margin: 20px;
								background-color: pink;
								transform:rotate(30deg);
								transform-origin:0 0;
							}
						</style>
					</head>
					<body>
						<div id="d1"></div>
						<br>
						<div id="d1"></div>
					</body>
					</html>
					

显示效果:


c.倾斜

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>块状元素倾斜实例</title>

						<style type="text/css">
							#d1{
								width: 100px;
								height: 100px;
								background-color: pink;
								<!--X轴倾斜45度,正值向左,负向右,同transform:skewX(45deg);-->
								transform:skew(45deg,0deg);
							}
							#d2{
								width: 100px;
								height: 100px;
								background-color: pink;
								<!--Y轴倾斜45度,正值向下,负向上,同transform:skewY(45deg);-->
								transform:skew(0deg,45deg);
							}
						</style>
					</head>
					<body>
						<div id="d1"></div>
						<br>
						<div id="d2"></div>
					</body>
					</html>
					

显示效果:


上面的旋转,缩放与倾斜可以统一写在transform属性中,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>transform综合实例</title>

						<style type="text/css">
							#d1{
								width: 50px;
								height: 50px;
								background-color: pink;
								margin:60px;
								<!--让d1顺时针旋转45度,并且长宽都扩大2倍,然后X轴方向向左倾斜10度,Y轴方向下倾斜20度(默认情况下,使用div的下底边作为X轴,使用div的左边作为Y轴,在div旋转后,X和Y轴方向并不是水平和垂直的,会发生相对位移,本例即相对原方向顺时针旋转45度,然后再做倾斜处理)-->
								transform:rotate(45deg) scale(2) skew(10deg,20deg);
							}
						</style>
					</head>
					<body>
						<div id="d1"></div>
					</body>
					</html>
					

显示效果:

d.3D平移

3D平移,语法如下:

transform:translate3d(x,y,z);
x,y参数与2d中translate的参数效果相同,在3d中多了一个z轴,与数学模型中的x,y,z轴一样,z轴垂直与电脑屏幕,并垂直与xy轴,z设置成正值,默认情况下图形会沿着z轴靠近观测者,并且逐渐放大(说明图形距观测者更近了),设置成负数则刚好相反。

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>3D变形实例</title>

						<style type="text/css">
							div{
								<!--设置查看者的距离位置,一般设置在元素的父元素上-->
								perspective: 1200px;
								<!--一般设置在元素的父元素上,表示子元素在3D空间中呈现-->
								transform-style: preserve-3d;
							}
							img{ 
								<!--设置3D偏移,x和y轴都不偏移,仅在z轴上,向观测者偏移200px-->
								transform:translate3D(0px,0px,200px); 
							} 
							<!--若想单独设置Z轴,可以直接写transform:translateZ(200px);,此时仅垂直与屏幕向上偏移的,在我们看来就像图片变大了一样-->
						</style>
					</head>
					<body>
						<div id="d1">
							<img src="../logo/logoa.png" alt="晴刃">
						</div>
						<span>www.qingsword.com</span>
					</body>
					</html>
					

显示效果:

晴刃