Home > Developer > JavaScript
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
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
Scale: scale (): positive number, negative number, decimal number
Displacement: translate (): css supports all units
The execution sequence of transform: The execution sequence of the last write.
The preceding transform value will also be changed based on the center point (transform-origin ).
Exercise: clock demo
Exercise: navigation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
