css的2D3D变换

css的2D3D变换

2d变换transform

通过css3转换,我们能够对元素进行移动、缩放、拉长或拉伸
2D转换方法:
translate()偏移
rotate()旋转
scale()缩放
skew()斜拉
matrix()矩阵

translate()偏移

元素从其当前位置移动,根据给定的left(x坐标)和top(y坐标)

.class{
	transform:translate(60px,80px);
}

将class的元素移动到x轴60px,y轴80px处。
单独定义偏移:
translateX(n) 沿着X轴移动元素;translateY(n) 沿着Y轴移动元素
这个属性我用的最多的场景无疑就是不定宽高元素居中;比方弹窗需要居中显示,大小可能是由内容撑开,就可以直接使用偏移方法来设置;

	.class{
		position:fixed;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
	}

rotate()旋转

通过rotate()方法,元素顺时针旋转给定的角度,允许负值,元素将逆时针旋转。

.class{
	transform:rotate(90deg)
}

值rotate(90deg)把元素顺时针旋转了90度。

在这里插入图片描述

scale()缩放

元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数:

.class{
	transform:scale(2,0.5)
}

scale(2,0.5)把宽度转换为原始尺寸的2倍,把高度转换为原始高度的0.5倍。
Scale也可以单独定义x轴y轴缩放
ScaleX(n)沿着x轴进行缩放;scaleY(n)沿着Y轴进行缩放
N为缩放的倍数,负数会产生翻转效果

Skew()翻转

通过skew()方法,元素反转给定的角度,根据给定的水平线(X轴)和垂直线(Y轴)参数;

.class{
	transform:skew(30deg,10deg);
}

skew(30deg,20deg)沿x轴把元素拉伸30度,沿y轴拉伸10度。
Skew()也可以单独定义x轴或者y轴缩放
SkewX(n),沿着X轴进行拉伸。SkewY(n),沿着Y轴进行拉伸。
skewX(30deg)
在这里插入图片描述
skewY(10deg)
在这里插入图片描述
skew(30deg,10deg)
在这里插入图片描述

3D变换

css3中的3d位移主要包括
translateZ()和translate3d()

3D旋转
css3中的3D旋转包括
rotateX()、routateY()、rotateZ()

3D缩放
css3中的3D缩放主要包括
scaleZ()和scale3d()两个功能函数

perspective属性

perspective属性定义3D元素距试图的距离,以像素计。该属性允许您改变3D元素查看3D元素的试图。当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身
perspective【观点】像是一个摄像机,通过不同机位观察物体相对位置,来实现css的相对大小变化,从而实现3D效果在这里插入图片描述

perspective-origin属性

perspective-origin属性定义了3D元素所基于的XY轴
当为元素定义perspective-origin属性时,其子元素会获得透视效果,而不是元素本身。
在这里插入图片描述
如图所示位置perspective指定了观测点的距离,origin属性则指定了从该位置的某个位置进行观测;

translateZ

要配合perspective实现近大远小的效果,当Z轴值越大时,元素距离观点更近,视觉上就变得更大;
反之其值越小,元素离观点更远,视觉上也就更小
在这里插入图片描述

translate3d

语法:translate3d(x,y,z)

.class{
	position:absolute;
	border:1px solid red;
	transform:translate3d(20px,20px,30px)
}

x轴y轴都好理解;z轴简单描述就是远近,然后近大远小缩放显示;
在这里插入图片描述

scale3d 缩放

语法:是scale3d(num,num,num)使元素在这三个纬度中缩放,也可以拆开,比方scaleX()|scaleY()|scaleZ()

.class{
	transform:scale3d(1,1,1)
}

rotate 旋转

同缩放rotateX(angle)|rotateY(angle)|rotateZ(angle)依照不同的轴进行旋转

transform-style属性

规定了如何在3d空间内呈现嵌套的元素。
语法:transform-style:flat子元素不保留其3d位置|preserve-3d子元素保留其3d位置;

backface-visibility属性

定义当元素不面向屏幕时是否可见。
通常如果我们希望有元素旋转后不被可见,例如做个书页翻动的效果,我们可能并不需要其背面被透视,就可使用该属性。
语法backface-visibility:visible|hidden;

.class{
	backface-visibility:hidden;
	/*兼容写法*/
	-webkit-backface-visibility:hidden;/*chrome\safari*/
	-moz-backface-visibility:hidden;/*ff*/
	-ms-backface-visibility:hidden;/*ie*/
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值