css3d转换_CSS 3D转换

css3d转换

You have already learned about 2D transformations and Gradients, so now its time to head towards 3D transformations in CSS.

您已经了解了2D变换和渐变，因此现在是时候使用CSS进行3D变换了。

What makes an object 3D? The inclusion of the z-axis, that's correct! Well 2D and 3D transformations are almost similar except that the 3D transformations have more methods due to an additional z-axis.

是什么使物体成为3D？ 包含z轴 ，这是正确的！ 井2D和3D转换几乎相似，不同之处在于3D转换由于附加的z轴而具有更多方法。

All the methods that you learnt for 2D transformations are also valid for 3D transitions but they have different names. Checkout the table below.

您为2D转换学习的所有方法对于3D转换也都有效，但是它们的名称不同。 查看下表。

Apart from the usual 2D methods, CSS3 provides us with the following functions:

除了常用的2D方法外，CSS3还为我们提供了以下功能：

• translateZ(z)

  平移Z(z)

• scaleZ(z)

  标度Z(z)

• rotateZ(z)

  旋转Z(z)

• rotateZ(z)

  旋转Z(z)

And a new property called backface-visibility.

还有一个称为backface-visibility的新属性。

perspective (perspective)

This property defines the number of pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed.

此属性定义从视图放置3D元素的像素数。 此属性使您可以更改如何查看3D元素的透视图。

Note: 注意： perspective property for an element, it is the CHILD elements that get the perspective view, and NOT the element itself.perspective属性时，CHILD元素将获得透视图，而不是元素本身。

This function is only available for 3D transformations.

此功能仅适用于3D转换。

div {
    -webkit-perspective: 250px;     /* for OLDER versions */
    perspective: 250px;
}

backface-visibility (backface-visibility)

This property defines whether or not an element should be visible when not facing the screen. This property is useful when an element is rotated, and you do not want to see the element’s backside.

此属性定义当不面向屏幕时元素是否应可见。 当旋转元素并且您不想看到元素的背面时，此属性很有用。

Syntax:

句法：

backface-visibility: visible | hidden | initial | inherit;

For Example,

例如，

div {
    -webkit-backface-visibility: hidden;/* OLDER VERSIONS */
    backface-visibility: hidden;
}

All the rest of the properties(except skew) that apply to 2D transformations also remain true for 3D transformations.

适用于2D转换的所有其他属性(偏斜除外)对于3D转换也仍然适用。

翻译自: https://www.studytonight.com/cascading-style-sheet/3D-transformations

css3d转换