一、transformtranslate50 0
transformtranslate()是CSS3中的一个2D/3D转换属性，它可以将一个元素（或一组元素）沿x轴和y轴移动。translate()接受两个参数，分别为水平偏移和垂直偏移，单位可以是像素、百分比、em，就像下面这样：
transform: translate(50px, 0);
这段代码的意思是，把元素向右移动50px，向下不动。如果水平偏移量是负值，则元素会向左移动。如果垂直偏移量是负值，则元素会向上移动。
当然，我们也可以使用translateX()和translateY()来分别控制横向和纵向偏移：
transform: translateX(50px);
transform: translateY(50px);
这两种写法和使用translate()是等价的。
二、transformtranslate turf
turf是Typography Modifier，是一种在文本排版时用来调整线宽、字间距等文本属性的CSS属性。在transformtranslate()函数中，它可以用来控制一个元素相对于自身中心轴的位置，比如这样：
transform: translate(50%, 50%);
这段代码的意思是把元素向右移动50%的宽度，向下移动50%的高度。turf对于居中元素、相对定位、垂直对齐非常有用。
三、transformtranslatey rotate
还可以通过transform来同时使用多个transform函数，这样我们就可以一次性实现多种不同的变换。比如下面这段代码可以先把元素向右移动50px，再把元素绕x轴旋转45度：
transform: translateX(50px) rotateX(45deg);
如果我们需要进行多个操作，可以把它们用一个空格隔开，比如下面这段代码实现了平移、缩放和斜切三个操作：
transform: translate(50px, 100px) scale(2) skewX(30deg);
最后，我们需要强调的是，所有的transform操作都是从元素自身进行变换的。如果我们需要让元素相对于页面或其他元素进行变换，我们需要使用position属性。
原创文章，作者：DDUWW，如若转载，请注明出处：https://www.506064.com/n/329652.html
微信扫一扫 
支付宝扫一扫 