From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/vi/web/css/transform-function/index.html | 160 +++++++++++++++++++++ .../transform-function/perspective()/index.html | 153 ++++++++++++++++++++ 2 files changed, 313 insertions(+) create mode 100644 files/vi/web/css/transform-function/index.html create mode 100644 files/vi/web/css/transform-function/perspective()/index.html (limited to 'files/vi/web/css/transform-function') diff --git a/files/vi/web/css/transform-function/index.html b/files/vi/web/css/transform-function/index.html new file mode 100644 index 0000000000..2237c7c1fb --- /dev/null +++ b/files/vi/web/css/transform-function/index.html @@ -0,0 +1,160 @@ +--- +title: +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Layout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/transform-function +--- +
{{CSSRef}}
+ +

The <transform-function> CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.

+ +

Describing transformations mathematically

+ +

Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the Cartesian coordinate system, although homogeneous coordinates are also sometimes used.

+ +

Cartesian coordinates

+ +

In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation (x, y).

+ +

In CSS (and most computer graphics), the origin (0, 0) represents the top-left corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be (2, 5), while a point 3 units to the left and 12 units up would be (-3, -12).

+ +

Transformation functions

+ +

Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:

+ +

ac bd

+ +

The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:

+ +

ac bd xy = ax+cy bx+dy

+ +

It is even possible to apply several transformations in a row:

+ +

a1 c1 b1 d1 a2 c2 b2 d2 = a1 a2 + c1 b2 a1 c2 + c1 d2 b1 a2 + d1 b2 b1 c2 + d1 d2

+ +

With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.

+ +

However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two additional parameters.

+ +
+

Note: Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3×3 transformation matrices, and can simply express translations as linear functions.

+
+ +

Syntax

+ +

The <transform-function> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.

+ +

Matrix transformation

+ +
+
matrix()
+
Describes a homogeneous 2D transformation matrix.
+
matrix3d()
+
Describes a 3D transformation as a 4×4 homogeneous matrix.
+
+ +

Perspective

+ +
+
perspective()
+
Sets the distance between the user and the z=0 plane.
+
+ +

Rotation

+ +
+
rotate()
+
Rotates an element around a fixed point on the 2D plane.
+
rotate3d()
+
Rotates an element around a fixed axis in 3D space.
+
rotateX()
+
Rotates an element around the horizontal axis.
+
rotateY()
+
Rotates an element around the vertical axis.
+
rotateZ()
+
Rotates an element around the z-axis.
+
+ +

Scaling (resizing)

+ +
+
scale()
+
Scales an element up or down on the 2D plane.
+
scale3d()
+
Scales an element up or down in 3D space.
+
scaleX()
+
Scales an element up or down horizontally.
+
scaleY()
+
Scales an element up or down vertically.
+
scaleZ()
+
Scales an element up or down along the z-axis.
+
+ +

Skewing (distortion)

+ +
+
skew()
+
Skews an element on the 2D plane.
+
skewX()
+
Skews an element in the horizontal direction.
+
skewY()
+
Skews an element in the vertical direction.
+
+ +

Translation (moving)

+ +
+
translate()
+
Translates an element on the 2D plane.
+
translate3d()
+
Translates an element in 3D space.
+
translateX()
+
Translates an element horizontally.
+
translateY()
+
Translates an element vertically.
+
translateZ()
+
Translates an element along the z-axis.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#transform-functions', '<transform-function>')}}{{Spec2('CSS Transforms 2')}}Added 3D transform functions.
{{SpecName('CSS3 Transforms', '#transform-functions', '<transform-function>')}}{{Spec2('CSS3 Transforms')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.types.transform-function")}}

+ +

See also

+ + diff --git a/files/vi/web/css/transform-function/perspective()/index.html b/files/vi/web/css/transform-function/perspective()/index.html new file mode 100644 index 0000000000..a69e46e094 --- /dev/null +++ b/files/vi/web/css/transform-function/perspective()/index.html @@ -0,0 +1,153 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective() +translation_of: Web/CSS/transform-function/perspective() +--- +
{{CSSRef}}
+ +

The perspective() CSS function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a {{cssxref("<transform-function>")}} data type.

+ +
{{EmbedInteractiveExample("pages/css/function-perspective.html")}}
+ + + +

The perspective() transform function is part of the {{cssxref('transform')}} value applied on the element being transformed. This differs from the {{cssxref('perspective')}} and {{cssxref('perspective-origin')}} properties which are attached to the parent of a child transformed in 3-dimensional space.

+ +

Syntax

+ +

The perspective distance used by perspective() is specified by a {{cssxref("<length>")}} value, which represents the distance between the user and the z=0 plane. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen. A positive value makes the element appear closer to the user than the rest of the interface, a negative value farther. The greater the value, the further away the perspective of the user is.

+ +
perspective(d)
+
+ +

Values

+ +
+
d
+
Is a {{cssxref("<length>")}} representing the distance from the user to the z=0 plane. If it is 0 or a negative value, no perspective transform is applied.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
+

This transformation applies to the 3D space and can't be represented on the plane.

+ 		This transformation is not a linear transformation in ℝ3, and can't be represented using a Cartesian-coordinate matrix. 10000100001000−1/d1
+ +

Examples

+ +

HTML

+ +
<p>Without perspective:</p>
+<div class="no-perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>With perspective (9cm):</p>
+<div class="perspective-box-far">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>With perspective (4cm):</p>
+<div class="perspective-box-closer">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+ +

CSS

+ +
.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+p + div {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  margin-left: 100px;
+}
+.no-perspective-box {
+  transform: rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-far {
+  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-closer {
+  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.top {
+  background-color: skyblue;
+  transform: rotateX(90deg) translate3d(0, 0, 50px);
+}
+
+.left {
+  background-color: pink;
+  transform: rotateY(-90deg) translate3d(0, 0, 50px);
+}
+
+.front {
+  background-color: limegreen;
+  transform: translate3d(0, 0, 50px);
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Examples', '250', '350') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}{{Spec2("CSS Transforms 2")}}Initial definition
+ +

Browser compatibility

+ +

Please see the <transform-function> data type for compatibility info.

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf