Settings for over and deformation in transition&transform,css

Source: Internet
Author: User

Set the effect of a style over


Transition-property:none/all;
Transition-duration:2s, time of movement, default is 0 seconds
transition-delay:0s; Delay time default 0 seconds
Transition-timing-function:ease slowly (default)

Linear constant speed ease-in acceleration ease-out deceleration ease-in-out first speed up and then slow down *

1, style duration delay can be ligatures multiple groups of each style using ', ' separated

Too many styles can be specified at the same time.

1, excessive time 2, excessive style
Transition:1s width, 2s height, 1s background;

2. excessive form
Bezier curves are important , almost all of them can be made with Bezier curves.
Website: http://cubic-bezier.com/#.14,.63,.79,.21

Pseudo-class selector, which triggers when the cursor moves to the top, creating an animated effect

-------------------------------------------------

Transform: Deformation properties

Pan: Translate

Panning: Translate a given coordinate, moving along the axis of the marker
First parameter: x-coordinate the second parameter: Y-axis coordinates refer to itself as a reference

Can give value or percent%

Rotation Angle Unit is deg with its own center as the center of rotation

Positive numbers counterclockwise in clockwise direction

Set the deformation reference origin default value is center top bottom left right


Transform:rotatex (45DEG);
Transform:rotatey (45DEG);

Scale () Zoom multiplier
Transform:scale (2.0, 0.5)
Greater than 1 means zoom in 1 or less represents shrinking
The contents of the box are then scaled together.

Transform-origin:left; The origin point of the zoom
Transform:scale (0.2, 0.5); Parameter xy
Transform:scalex (0.5); Along the x-axis
Transform:scaley (. 4); Along the Y axis

Skew () tilt
X-axis tilt: positive counterclockwise
Y-axis tilt: positive clockwise

Tilt refers to the tilt of the XY axis
Transform-origin:left; Set the origin of the skew
Transform:skew (30deg, 30deg); Parameter xy
Transform:skewx (30DEG); Along the x-axis
Transform:skewy (30DEG); Along the Y axis

Settings for over and deformation in transition&transform,css

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.