CSS3 transform2d变换

最新推荐文章于 2022-12-15 10:53:02 发布

weixin_45846263

最新推荐文章于 2022-12-15 10:53:02 发布

阅读量308

点赞数

本文链接：https://blog.csdn.net/weixin_45846263/article/details/105739684

版权

CSS3 transform2d变换

参考点（旋转基点）

css的参考点就是元素所围绕其旋转的点，在css中用一个属性设置旋转基点

transform-origin: left top; // 设置该元素的旋转基点为该元素的左上角

transform-origin属性是css变换的一个重要的属性，一般需要设置2个值：
第一个值为偏移x轴方向的距离，可以是百分值,em,px也可以用关键字left、right、center
第二个值为偏移y轴方向的距离，可以是百分值,em,px也可以用关键字top、bottom、center
第三个值为偏移z轴方向的距离，只能使用具体的距离值描述，这个值是使用在开启了3d模式下使用的，第三个值默认值为0。
ps: 当只设置一个值的时候，那就意味着第二个值默认为center，第三个值默认为0
我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。
实例：
默认
在这里插入图片描述
transform-origin: left top;

transform-origin: left;

ps： transform-origin并不是transform中的属性值，他具有自己的语法

2d变换

说完参考点之后，下面说说transform的四种变换方法：
一、rotate（旋转，单位为deg）
rotate(x) 围绕z轴旋转，只接受一个参数，并且这个是2d方面的旋转，但是和后面的3d旋转中的围绕z轴旋转有着本质区别
其中x是指旋转角度，需先有transform-origin属性的定义，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：
transform-origin: 0 0;下面例子中参考点都为左上角
transform:rotate(30deg):
在这里插入图片描述
rotateX(n) 围绕x轴旋转
transform: rotateX(30deg);

rotateY(n) 围绕y轴旋转
transform: rotateX(90deg);

注意：旋转的是轴，因此前一次的旋转作用会保留，因此旋转需要注意顺序: transform: rotateY(30deg) rotateX(60deg)和 transform: rotateX(30deg) rotateY(60deg)是不同的

二、translate(位移，单位px等)
translate(x,y) 沿着x轴正方向移动x距离 y轴正方向移动y距离
transform:translate(50px,20px);
在这里插入图片描述
translateX(n) 沿着x轴正方向移动n距离
transform:translateX(50px);

translateY(n) 沿着y轴正方向移动n距离
transform:translateY(50px);

在这里插入图片描述
三、scale（缩放，无单位)
scale(x,y) 更改元素的宽度和高度，将元素的宽度变为原来的x倍，将高度变为原来的y倍, Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准
scaleX(n) 更改元素的宽度 scaleY(n) 更改元素的高度
它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置
默认值： 1 原始大小
放大：> 1
缩小：0~1之间
可以叠加操作
例：
transform:scale(2,1.5)
在这里插入图片描述
transform:scaleX(2) scaleX(0.5); //叠加

当元素当取值为负数的时候，首先将元素绕着x、y（取决于你的缩放方向）旋转180deg，然后再进行缩放。
例： transform:scale(-2)

在这里插入图片描述
注意：此元素的变化坐标轴刻度

四、skew（斜切，单位deg）
skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
transform:skew(30deg,10deg);
在这里插入图片描述
transform: skewX(30deg);

<ul>
   <li>芒果TV</li>
   <li>腾讯</li>
   <li>爱奇艺</li>
   <li>优酷</li>
</ul>

ul {
    padding: 0;
    margin: 100px;
    list-style: none;
    width: 400px;
    height: 30px;
    display: flex;
   }
   li {
    flex: 1 1 auto;
    line-height: 30px;
    text-align: center;
    color: #F40;
    font-weight: bold;
    transform: skewX(30deg);
    box-sizing: border-box;
    background-color: lightgreen;
   }