Home > Developer > Web Develop

CSSS3 2D Conversion

Source: Internet
Author: User
Tags mathematical functions
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CSS3 Conversion

With CSS3 conversion, we are able to move, scale, rotate, lengthen, or stretch elements.

How does it work?

Transformations are an effect that changes the shape, size, and position of an element.

You can use 2D or 3D transformations to transform your elements.

Browser support

Internet Explorer 10, Firefox, and Opera support the Transform property.

Chrome and Safari need a prefix of-webkit-.

notes: Internet Explorer 9 requires a prefix of-ms-.

Conversion

In this chapter, you will learn the following 2D conversion methods:

    • 1. Translate ()
    • 2. Rotate ()
    • 3. Scale ()
    • 4. Skew ()
    • 5. Matrix ()
1.translate () method

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

Example:
  2. Div
  4. {
  6. Transform: translate(50px,100px);
  8. -Ms-transform: translate(50px,100px); / * IE 9 * /
  10. -WebKit-transform: translate(50px,100px); / * Safari and Chrome * /
  12. -o-transform: translate(50px,100px); / * Opera * /
  14. -Moz-transform: translate(50px,100px); / * Firefox * /
  16. }

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

<! DOCTYPE html>
<body>
<div>
How are you doing. This is a DIV element.
</div>
<div id= "Div2" >
How are you doing. This is a DIV element.
</div>
</body>

Css:

Div
{
width:100px;
height:75px;
Background-color:yellow;
BORDER:1PX solid black;
}
Div#div2
{
Transform:translate (50px,100px);
-ms-transform:translate (50px,100px); /* IE 9 */
-moz-transform:translate (50px,100px); /* Firefox */
-webkit-transform:translate (50px,100px); /* Safari and Chrome */
-o-transform:translate (50px,100px); /* Opera */
}

Like HTML, CSS only writes the changed style

2.rotate () method

The element rotates the given angle clockwise by the rotate () method. A negative value is allowed , and the element rotates counterclockwise.

Instance
  2. Div
  4. {
  6. Transform: rotate(30deg);
  8. -Ms-transform: rotate(30deg); / * IE 9 * /
  10. -WebKit-transform: rotate(30deg); / * Safari and Chrome * /
  12. -o-transform: rotate(30deg); / * Opera * /
  14. -Moz-transform: rotate(30deg); / * Firefox * /
  16. }

The value rotate (30deg) Rotates the element clockwise by 30 degrees.
Div#div2
{
Transform:rotate (30DEG);
-ms-transform:rotate (30DEG); /* IE 9 */
-moz-transform:rotate (30DEG); /* Firefox */
-webkit-transform:rotate (30DEG); /* Safari and Chrome */
-o-transform:rotate (30DEG); /* Opera */
}

3.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:

Example code:
  2. Div
  4. {
  6. Transform: scale(2,4);
  8. -Ms-Transform: scale(2,4); / * IE 9 * /
  10. -WebKit-transform: scale(2,4); /* Safari and Chrome */
  12. -o-transform: scale(2,4); / * Opera * /
  14. -Moz-transform: scale(2,4); / * Firefox * /
  16. }

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.
Div#div2
{
margin:100px;
Transform:scale (2,4);
-ms-transform:scale (2,4); /* IE 9 */
-moz-transform:scale (2,4); /* Firefox */
-webkit-transform:scale (2,4); /* Safari and Chrome */
-o-transform:scale (2,4); /* Opera */
}

4.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:

Sample code
  2. Div
  4. {
  6. Transform: skew(30deg,20deg);
  8. -Ms-transform: skew(30deg,20deg); / * IE 9 * /
  10. -WebKit-transform: skew(30deg,20deg); /* Safari and Chrome * /
  12. -o-transform: skew(30deg,20deg); / * Opera * /
  14. -Moz-transform: skew(30deg,20deg); / * Firefox * /
  16. }

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

Div#div2
{
Transform:skew (30DEG,20DEG);
-ms-transform:skew (30DEG,20DEG); /* IE 9 */
-moz-transform:skew (30DEG,20DEG); /* Firefox */
-webkit-transform:skew (30DEG,20DEG); /* Safari and Chrome */
-o-transform:skew (30DEG,20DEG); /* Opera */
}

5.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.

Sample code

How to use the matrix method to rotate a DIV element 30 degrees:

  2. Div
  4. {
  6. Transform:matrix (0.866,0.5,-0.5 ,0.866,0 0
  8. -ms-:matrix (0.866 ,0.5,-0.5 0.866,0,0 /* IE 9 */
  10. -moz-:matrix (0.866 ,0.5,-0.5 0.866,0,0 /* Firefox */
  12. -webkit-:matrix (0.866 ,0.5,-0.5 0.866,0,0 /* Safari and Chrome */
  14. -o-transform:matrix(0.866,0.5,-0.5,0.866, 0,0); / * Opera * /
  16. }

Method of Transform
function Description
Matrix (n,n,n,n,n,n) Defines a 2D conversion, using a matrix of six values.
Translate (x,y) Defines 2D transformations, moving elements along the X and Y axes.
TranslateX (n) Define 2D transformations and move elements along the X-axis.
Translatey (n) Defines a 2D transformation that moves elements 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.

Csss3 2D Conversion

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
cairo 2d 2d jrpg 2d moba 2d fighter 2d intro godot 2d printf 2d

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More