CSS3 a detailed description of the Translate property

Source: Internet
Author: User
Tags mathematical functions
The Translate property is a property of the displacement, which we can move from its current position to the specified position by means of the translate () method element, as described in detail below.

With the translate () method, the element moves from its current position, based on the given left (x-coordinate) and top (y-coordinate) positional parameters:

The value translate (50px,100px) moves the element from the left to 50 pixels, moving 100 pixels from the top.

Rotate () method

The element rotates the given angle clockwise by the rotate () method. Negative values are allowed, and the elements rotate counterclockwise.

The value rotate (30deg) Rotates the element clockwise by 30 degrees.

Scale () method

With the scale () method, the dimensions of the element are increased or decreased, depending on the given width (X-axis) and height (Y-axis) Parameters:

The value scale (2,4) converts the width to twice times the original size and converts the height to 4 times times the original height.

Skew () method

By the skew () method, the element flips the given angle, according to the given horizontal line (X axis) and vertical (Y-axis) Parameters:

The value skew (30deg,20deg) flips the element around the X-axis by 30 degrees and flips 20 degrees around the Y-axis.

Matrix () method

The matrix () method combines all 2D conversion methods.

The matrix () method requires six parameters, including mathematical functions that allow you to: rotate, scale, move, and skew elements.

New Transformation Properties

The following table lists all the conversion properties:

Transform applies a 2D or 3D conversion to an element.

Transform-origin allows you to change the position of the element being converted.

Method of Transform

Matrix (n,n,n,n,n,n) defines a 2D conversion, using a six-value matrices.

Translate (x, y) defines 2D transformations, moving elements along the x and Y axes.

TranslateX (n) defines the 2D transformation and moves the element along the X-axis.

Translatey (n) defines the 2D transformation and moves the element along the Y axis.

Scale (x, y) defines the 2D scaling transformation, changing the width and height of the element.

ScaleX (n) defines the 2D scaling transformation, changing the width of the element.

ScaleY (n) defines the 2D scaling transformation, changing the height of the element.

Rotate (angle) defines the 2D rotation, which specifies the angle in the parameter.

Skew (X-angle,y-angle) defines a 2D tilt transition along the x and Y axes.

SKEWX (angle) defines a 2D tilt transition along the X axis.

Skewy (angle) defines a 2D tilt transition along the Y axis.


I believe that after the introduction you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

Tutorial on using Transform properties in CSS3

The Border-image attribute in CSS3 is described in detail

CSS3 font to make flame effect steps

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.