css 2d转换_CSS 2D转换

css 2d转换

Hello! Today, from here we begin our journey into some advanced CSS topics like CSS transformations, which was included in the CSS3 specification.

你好！ 今天，从这里开始，我们进入一些高级CSS主题，例如CSS转换，该主题已包含在CSS3规范中。

We will start with 2D transformations that allows you to translate, scale and skew elements. We have explained what these terms mean in details below.

我们将从2D转换开始，它允许您平移 ， 缩放和倾斜元素。 我们已经在下面详细解释了这些术语的含义。

A transformation is an effect that lets an element change shape, size or its position. CSS3 supports both 2D and 3D transformations.

变换是一种使元素更改形状，大小或其位置的效果。 CSS3支持2D和3D转换。

Let's start by listing down the browser which supports 2D transformations.

让我们从列出支持2D转换的浏览器开始。

• IE 10+

  IE 10以上

• Google Chrome 36+

  谷歌浏览器36+

• Mozilla Firefox 16+

  Mozilla Firefox 16+

• Safari 9+

  Safari 9+

• Opera 23+

  歌剧23+

Note: 注意： -ms- or -ms-或–webkit-).–webkit- )。

Instead of properties, you will learn the following transformation functions in this tutorial.

在本教程中，您将学习以下转换功能，而不是属性。

• translate()

  翻译()

• rotate()

  旋转()

• scale()

  规模()

• skewX()

  skewX()

• skewY()

  skewY()

translate() (translate())

This function moves an element from its normal position to a different position using the values provided as parameters to the function.

该功能使用提供给函数的参数值将元素从其正常位置移动到其他位置。

The following example will move the <h1> element 50 pixels to the right, and 100 pixels down from its original position. Notice the prefixes attached to support older versions.

以下示例将<h1>元素向右移动50像素，并从其原始位置向下移动100像素。 请注意附带的前缀以支持较旧的版本。

h1{
    -ms-transform: translate(50px,100px);   /* IE 9 */
    -webkit-transform: translate(50px,100px);   /* Safari */
    transform: translate(50px,100px);
}

Live Example →

现场示例→

rotate() (rotate())

You can rotate a particular element clockwise or anti-clockwise by providing a degree value to this function.

您可以通过提供一个旋转的特定元素顺时针或逆时针 degree这个函数值。

h1{ 
    transform: rotate(20deg);
}

Live Example →

现场示例→

scale() (scale())

Scaling increases or decreases the size of an element.

缩放可增加或减小元素的大小。

div{ 
    transform: scale(2, 3);
}

The above example will increase size of the <div> element to two times of its original width, and three times of its original height.

上面的示例将<div>元素的大小增加到其原始宽度的两倍和其原始高度的三倍。

Live Example →

现场示例→

Try using negative values in the scale() method and see how the mirror image of the text inside the element is displayed.

尝试在scale()方法中使用负值，然后查看元素内文本的镜像显示方式。

skew() (skew())

You can also skew an element along the X-axis or Y-axis by any given angle by using the skewX() or skewY() functions respectively.

您也可以分别使用skewX()或skewY()函数，沿X轴或Y轴将元素倾斜任何给定角度。

div{ 
    transform: skewX(20deg); 
}

div{ 
    transform: skewY(30deg); 
}

Or, you can provide two parameters to the skew() method as follows:

或者，您可以为skew()方法提供两个参数，如下所示：

div{ 
    transform: skew(20deg, 30deg);
}

The first parameter corresponds to the X-axis and the second to Y-axis. If the second parameter is not specified, it will take zero value by default.

第一个参数对应于X轴 ，第二个参数对应于Y轴 。 如果未指定第二个参数，则默认为零。

Live Example →

现场示例→

转换来源属性 (The Transform-Origin Property)

The transform-origin property allows you to change the position of already transformed elements. The x-axis and y-axis of an element can be altered in a 2D transformation whereas the z-axis of an element can also change along with x-axis and y-axis in 3D transformations.

transform-origin属性允许您更改已转换元素的位置。 元素的x轴和y轴可以在2D转换中更改，而元素的z轴也可以在3D转换中随x轴和y轴更改。

Note: 注意： This property must be used together with the transform property. 此属性必须与transform属性一起使用。

Syntax:

句法：

transform-origin: x-axis y-axis[z-axis] | initial | inherit;

• The possible values for the x-axis parameter are right, left, center, length or percentage.

  x轴参数的可能值为right ， left ， center ， length或percent 。

• The possible values for the y-axis parameter are top, bottom, center, length or percentage.

  y轴参数的可能值为top ， bottom ， center ， length或percent 。

• The possible value for z-axis is length.

  z轴的可能值为length 。

Alright, so that was all about 2D transformations in CSS3.

好的，这就是CSS3中的2D转换。

翻译自: https://www.studytonight.com/cascading-style-sheet/css-2D

css 2d转换