Css deformation transform, csstransform

Source: Internet
Author: User

Css deformation transform, csstransform
Transition: excessive attribute

  • Transition-property specifies the name of the css attribute with an excessive effect. By default, all can be set.

  • Transition-duration specifies the number of seconds or milliseconds required to complete the excessive Effect

  • Transition-timing-function: easetransition-delay by default

    • Slow: Slow down
    • Linear: constant speed
    • Acceleration-in
    • Slow-out: deceleration
    • Slow-in-out: acceleration is slowing down first
    • Cubic-besuppliers: besell Curve

Transitionend: overfulfill event

1 function addEnd(obj,fn){2     obj.addEventListener('WebkitTransitionEnd',fn,false);3     obj.addEventListener('transitionend',fn,false);4 }5 function removeEnd(obj,fn){6     obj.removeEventListener('WebkitTransitionEnd',fn,false);7     obj.removeEventListener('transitionend',fn,false);8 }
Note: 1 in transition, if there are multiple writes, the event will be triggered if the style is not changed once.
2. Trigger the transitionend event repeatedly. For example, the position of the Y axis of the div is repeatedly changed below.
 1 <!DOCTYPE html> 2 View Code


Transform: Deformation

  • Rotation: rotate (): Degree

  • Oblique cut: skew (): Degree

    • SkewX
    • SkewY
  • Scale: scale (): positive number, negative number, decimal number

    • ScaleX
    • ScaleY
  • Displacement: translate (): css supports all units

    • TranslateX
    • TranslateY
  • The execution sequence of transform: The execution sequence of the last write.

    • Transform: scale (2) rotate (50deg); perform rotation first, and then scale


The preceding transform value will also be changed based on the center point (transform-origin ).



Exercise: clock demo

Exercise: navigation


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.