This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.
该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。
As we approach the end of the alphabet and the end of the first season of AtoZ CSS, there aren’t many properties, values or concepts that start with the letter X.
当我们接近AtoZ CSS的字母结尾和第一个季节的结尾时，以字母X开头的属性，值或概念并不多。
There are however a series of transform values that allow elements to have their visual coordinates changed along the x-axis to create complex and interesting visual details on the page.
但是，存在一系列transform值，这些值允许元素沿x轴更改其视觉坐标，从而在页面上创建复杂而有趣的视觉细节。
In this episode we’ll learn all about:
在这一集中，我们将学习以下所有内容：
The CSS transform property
CSS transform属性
Moving elements with translate and translateX
使用translate和translateX移动元素
The performance benefits of using translate over other methods
与其他方法相比，使用translate的性能优势
The transform property allows elements to be moved from their natural position in the document whilst maintaining that original space – a bit like the result of moving elements with position:relative.
transform属性允许元素从其在文档中的自然位置移开，同时保持原始空间-有点像使用position:relative移动元素的结果。
Elements can be translated, rotated, scaled or skewed in various different ways on various different axes.
元素可以在各种不同的轴上以各种不同的方式平移，旋转，缩放或倾斜。
The transform property can take the following values:
transform属性可以采用以下值：
matrix()
matrix()
matrix3d()
matrix3d()
translate()
translate()
translateX()
translateX()
translateY()
translateY()
translateZ()
translateZ()
translate3d()
translate3d()
scale()
scale()
scaleX()
scaleX()
scaleY()
scaleY()
scaleZ()
scaleZ()
scale3d()
scale3d()
skew()
skew()
skewX()
skewX()
skewY()
skewY()
rotate()
rotate()
rotateX()
rotateX()
rotateY()
rotateY()
rotateZ()
rotateZ()
rotate3d()
rotate3d()
perspective()
perspective()
There’s a long list here and to be honest, I only use a small selection of them on day to day projects. It’s useful to know the other options but I most often use:
这里有一个很长的列表，说实话，我在日常项目中只使用一小部分。 知道其他选项很有用，但我最常使用：
translate()
translate()
rotate()
rotate()
scale()
scale()
and skew()
和skew()
It’s also possible to chain multiple transform values together by creating a space separated list as follows:
也可以通过创建一个空格分隔的列表将多个transform值链接在一起，如下所示：
.some-class { transform: scaleX(2) rotate(10deg); }This will double the horizontal scale of an element and rotate it 10 degrees clockwise.
这将使元素的水平比例加倍，并将其顺时针旋转10度。
The translate value moves an element in 2D space.
translate值在2D空间中移动元素。
I have an image here with a couple of paragraphs above and below it.
我在这里有一个图片，上面和下面都有几个段落。
The translate function accepts one or two values. If two values are passed in, the first specifies the translation along the x-axis, the second for the y-axis.
translate函数接受一个或两个值。 如果传入两个值，则第一个指定沿x轴的平移，第二个指定y轴。
img { transform: translate(10px,60px); }The values can be any valid length available in CSS. It could be px, em, rem, % etc.
这些值可以是CSS中可用的任何有效长度。 可能是px ， em ， rem ， %等。
If just one value is provided, the second value is assumed to be zero and so no y-axis translation takes place.
如果仅提供一个值，则假定第二个值为零，因此不会发生y轴平移。
Using translateX we can be more explicit about the transformation we want to create as it’s very clear that this is only supposed to occur in the x-direction. If I only wanted this single-axis movement, translateX would be my preference as it’s always best to be clear about your intent when writing code.
使用translateX我们可以更清楚地了解我们要创建的转换，因为很明显，这仅应发生在x方向。 如果我只希望这种单轴运动，那么我会优先选择translateX ，因为始终最好在编写代码时清楚您的意图。
When animating elements, there are benefits to animating the transform property over animating something like margin or top and left position.
对元素进行动画处理时，与对诸如margin或top和left位置之类的动画进行动画处理相比，对transform属性进行动画处理具有很多好处。
When animating elements with transform, the processing is moved on to the graphical processing unit (GPU) rather than the CPU. The net result of this is that animations are smoother and they have less of an impact on perceived responsiveness and battery life.
使用transform为元素设置动画时，处理将移至图形处理单元(GPU)而非CPU。 最终的结果是动画更流畅，并且对感知的响应能力和电池寿命的影响较小。
For an in-depth and technical screencast that outlines these benefits really well, check out this video from Paul Irish titled “Why Moving Elements With Translate() Is Better Than Pos:abs Top/left”.
要获得很好地概述这些好处的深入技术性截屏视频，请观看Paul Irish的这段视频，标题为“为什么使用Translate()移动元素胜过Pos：abs顶部/左侧” 。
I found this to be the case first hand when I made the animation for AtoZ CSS – to begin with, I animated the margin-left property of the animation container but found this to be very slow. Moving to animating the container with translate, really improved the visual performance.
在为AtoZ CSS制作动画时，我发现这是第一手的情况–首先，我对动画容器的margin-left属性进行了动画处理，但是发现它非常慢。 移动到带有translate动画容器，确实改善了视觉性能。
翻译自: https://www.sitepoint.com/atoz-css-screencast-translatex/
