Home > Developer > Web Develop

CSS Learning notes 2-2d transformations and Transition properties

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

Preface: Today is a weekend, the mood is good, take advantage of spare time, the rest of the CSS3 to learn the contents of all finishing out, practice with the source also a little tidy up a bit.

Conversion

transform:translate| | rotate| | scale| | Skew

Pan, rotate, scale, chamfer

1. Pan transform:translate ()

Parameter description:

    1. In the case of only one value, the horizontal motion is indicated, the positive value is right, the negative value is left, and the percentage is acceptable, and the percentage refers to its own width, height
    2. Two values control both horizontal and vertical
    3. The move does not affect other elements, similar to relative positioning
    4. We can use the absolute positioning of the box with Transform:translate ( -50%,-50%) to achieve a box without width height horizontal vertical Center, if there is no width, the maximum width of the box can only reach the half of the parent box
    5. If you want to move in a single direction you can write TranslateX () and Translatey ()
<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset="UTF-8" ><Title>document</Title><Style> . box{Width 200px;Height 200px;Background-color:Pink }. Box:hover{/* Transform:translate ( -10px,10px); *//* Transform:translatey ( -10px); */Transform:Translatey (10%);} </style></head><body> <div class="box" >1  </div> <div class="box" >2</ div> </body> </html>
2. Rotating Transform:rotate ()

Parameter description:

    1. Unit is deg angle
    2. Overall rotation (including content inside)
    3. A positive value rotates a negative value clockwise and vice versa
    4. The center point can control the Transform-origin: value (the value can be an azimuth noun, it can be a pixel, or it can be a percentage, referring to its own height)
<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset="UTF-8" ><Title>document</Title><Style> . box{Width 200px;Height 200px;Background-color:PinkMargin 100px Auto;TransitionAll10s;transform-origin: 50%  50%; } .box:hover{Transform: rotate (-50deg);} </style></ head><body> <div class=  "box" >1</div> </body></ HTML>
3. Zoom Transform:scale ()

Parameter description:

    1. No units, accept values and decimals
    2. Case with only one value, overall zoom (equal scale)
    3. Two values, width and height are scaled separately (May deform)
    4. The border is also scaled, and if you want to zoom in one direction, you need to write a 1 in the other direction.
    5. The center point of the zoom can also be controlled
<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset="UTF-8" ><Title>document</Title><Style> . box{Width 200px;Height 200px;Background-color:PinkMargin 100px Auto;TransitionAll1s;Border 5px Solid#000;transform-origin: Right;} .box:hover{Transform: scale (2,1);} </style></ head><body> <div class=  "box" >1</div> </body></ HTML>
4. Oblique Cut Transform:skew ()

Parameter description:

    1. Unit is deg
    2. In the case of only one value, the horizontal chamfer
    3. Two-value case, horizontal vertical, respectively, chamfered
    4. The chamfered center point can also be controlled if it is the x-axis chamfered center point control up and down if it is the y-axis chamfered center point control around
<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset="UTF-8" ><Title>document</Title><Style> . box{Width 200px;Height 200px;Background-color:PinkMargin 100px Auto;TransitionAll1s;Border 5px Solid #000; transform-origin: Bottom;} .box:hover{Transform: skew (45deg);} </style></ head><body> <div class=  "box" >1</div> </body></ HTML>
5. Transition transition

Transition: Attribute duration transition curve time delay

Transitions are not animations, it is the process of changing from one state of CSS to another in the middle of a state.

Value Description:

    1. That attribute requires a transition. The attribute can be replaced by all (must write)
    2. The duration of the transition, the unit can be S or MS (must write)
    3. The curve of the transition
    4. How long the transition starts from the time delay
6.2D Conversion Summary
    1. To move, skew, or enlarge, either by x or Y to control a certain direction.
    2. The center point can control rotation, scaling, and chamfering
    3. If we want multiple 2D effects to coexist, we need to adopt a ligatures approach
    4. When you need to transfrom in different scenarios, you need to copy the previous existing to prevent overwriting
    5. Transform conversion effect order as far as possible to maintain unity, if not unified there will be some problems
<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset="UTF-8" ><Title>document</Title><Style> . box{Width 200px;Height 200px;Background-color:PinkTransitionAll1s;Border 5px Solid#000;PositionAbsoluteLeft 50%;Top 50%;TransformTranslate (-50%,-50%)Rotate0DEG)Scale1); }.box:hover{transform: Translate (-50%,-50%) rotate (360deg) scale (2); } </style></ head><body> <div class=  "box" >1</div> </body></ HTML>

CSS Learning notes 2-2d transformations and Transition properties

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:
css transition translate css transition transform css transition tutorial dom properties and methods objects and properties using basic graphs and transformations to draw pictures patch notes 7 2

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