HTML（二）transform属性

transform属性

• 一、translate属性与其他属性组合导致的特殊问题
• scale与translate组合
• rotate与translate组合
• skew与translate组合
• 二、其他属性
• transform-origin 变换基点
• transform-style
• backface-visibility
• perspective

transform 有四个属性：

• 位移：translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)
    % ——相对于自身宽高的百分比
    px
• 缩放：scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,yz)
• 旋转：rotate(angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d(x,y,z,angle)
    deg
• 斜切：skew(x-angle,y-angle)、skewX(angle)、skewY(angle)
    deg

如果 translate 、skew 只有一个参数，就代表 translateX 、skewX；
如果scale 只有一个参数，代表 scale (x , y)

一、translate属性与其他属性组合导致的特殊问题

scale与translate组合

transform: scale(2) translate(100px);
transform: translate(100px) scale(2);

• transform 组合属性，是按照从左到右的顺序依次实现功能；
• scale在前 translate在后 ,图形会先以transform-origin 为中心扩大/缩小，之后再进行位移，translate位移的距离也会扩大或缩小scale相应的倍数；
• translate在前 scale在后 ，图形会先位移，之后再以transform-origin 为中心扩大/缩小

<div class = "box1">box1</div>
<div class = "box2">box2</div>
<div class = "box3">box3</div>
<div class = "box4">box4</div>

<style>
	*{
		margin:0;
		padding:0;
	}
	.box1{
		width:100px;
		height:100px;
		background: pink;
	}
	.box2{
		width:100px;
		height:100px;
		background: skyblue;                  
		transform:  translate(100px) ;
	} 
	.box3{
		width:100px;
		height:100px;
		background: plum;
		transform:  translate(100px) scale(2) ;
		opacity: .5;
		/* transform-origin: left top; */
	}
	.box4{
		width:100px;
		height:100px;
		background: burlywood;
		transform:scale(2) translate(100px);
		opacity: .5;
	} 
</style>

运行结果如下：

rotate与translate组合

1、当translate 在前，rotate 在后时：
transform : translate(20px) rotate(20deg) ;
当translate 变动时，图形会沿X轴移动；
当translate变动时，还没有rotate旋转，所以此时X轴是水平的，图形就沿水平移动

1、当rotate 在前，translate 在后时：
transform : rotate(20deg) translate(20px) ;

由于属性的功能是从左到右依次实现的，所以：
当translate变动时，rotate旋转了20度，X轴和Y轴也旋转了20度，图形是沿X轴移动的，所以方向是倾斜的

skew与translate组合

1、skew图形解析
transform : skewX(45deg)

所以水平方向的度数变化会影响Y轴

2、当translate 在前，skew 在后时：
transform : translate(20px) skewY(20deg) ;

3、当skew在前，translate在后时：
transform : skewY(20deg) translate(20px) ;

二、其他属性

transform-origin 变换基点

transform-origin：               水平   垂直
                      left /right /center   top /bottom /center
                                      %   % （相对于自身宽高的百分比）
                                      px   px（相对于自身左上角的px值）

transform-style

设置元素的子元素是位于 3D 空间中还是平面中
transform-style: flat;
设置元素的子元素位于2D平面中
transform-style: preserve-3d;
设置元素的子元素位于该元素的平面中

【注意】给3D效果的父元素加此属性

backface-visibility

指定当元素背面朝向观察者时是否可见
backface-visibility: visible;
背对屏幕可见
backface-visibility: hidden;
背对屏幕不可见 ------ 3D

perspective

透视效果，近大远小
perspective : 1000px

来源：CSDN

作者：喝啤酒的猫

链接：https://blog.csdn.net/qq_38763173/article/details/104197644