A, CSS3 transition property transition
css3 css attribute value of the transition is allowed to smoothly transition in a certain time interval. This effect can be the mouse across, click, or get the focus for any change in the trigger element and smoothly animated effects changing CSS property values
transitional attribute requires a trigger event, such as: hover (mouse over the event)
- transition-property: retrieve or set the object attributes involved in the transition
Description: Property Value No attribute can be set individually, may also be provided a plurality of attributes width, height; can be set to all (default value) represents all properties - transition-duration: duration of objects retrieved or set of transitional
Description: Sets the excessive time (s, ms) 1s = 1000ms - transition-delay: retrieving an object or set the transition time delay
Description: Sets the excessive delay time (s, ms) attribute value is positive when the transition effect is to delay the execution, for the time just ahead of the transition is a negative effect; - transition-timing-function: retrieve or set the animation object type transition
Description:
Linear uniform
ease (default) slow down for
ease-in acceleration
ease-out deceleration
ease-in-out after the first decelerating acceleration
Bezier URL: http://cubic-bezier.com/
compound writing: Transition: All lS 2S
Linear;
Transition: Linear lS 2S All;
Note: when using composite writing, over time and the delay time sequence are not interchangeable the first value represents the over-time, the second value represents the delay time;
Note: which element is deformed, add transitions put the property to whom; recommends that effect addressed to the elements in the original;
Two, CSS3 2Dtransform property
transform the meaning translated into Chinese with the "transformation" or "change". This property has a very powerful feature, can achieve such a displacement element, and rotating or stretching effect can best embody the transform property powerful strength is achieved 3D transition elements.
2D performance function:
1, 2D displacement translate ()
Description: translate (tx) When a parameter value, the representative of the displacement in the horizontal direction;
the distance translate (tx, ty) represents a first horizontal direction, second vertical distance values;
. distance translate (tx, ty, tz) a first value represents the horizontal direction, the second value to the third value in the vertical direction along the Z axis (3D)
the translateX (TX) designated direction set the displacement along the X axis
translateY (ty) specified displacement direction along the Y axis
translateZ (tz) specified displacement direction along the Z axis (3D)
to the right or down when the attribute value when the representative value is when the time is a negative value representing the left or upward movement
Description: attribute values can be used in px% (percentage of the size of the reference element is the width and height)
Description: Translate () and effects displacement in the relative positioning of the effect are similar, are to be displaced at the current location, its layout elements are not affected, retained its original location.
2,2D zoom scale ()
Description: attribute value represents a multiple of the unit is not applied; between 0--1 effect is reduced, is greater than 1 when the amplification effect;
the default value is 1;
Scale (values 1 ) are representative of horizontal and vertical enlargement or reduction
scale (value 1, value 2) value of 1: 2 scaling the size value in the horizontal direction: the vertical direction
property value can be set to a negative value, but is rarely used;
scaling the scaleX (value) in the horizontal direction
scaleY (value) in the vertical direction scaling
scaleZ (value) scaling (3D) Z axis direction
3,2D rotation so rotate ()
Description: unit attribute values in degrees (deg)
rotate () rotating along a center point; only put a property value, value: clockwise rotation; negative: counterclockwise rotation;
rotateX () is rotated in the X-axis
rotateY () is rotated in the Y-axis
rotateZ () along the Z axis (3D)
4,2D inclined skew ()
Description: the attribute value in degrees (deg); attribute value is positive: negative tilt left or: right or downward
skew (value 1) when a value representative of tilt along the X-axis
skew (value 1, value 2) value 1: along the X axis tilt value 2: along the Y-axis tilt
the skewX () inclined along the X axis
the skewY () inclined along the Y axis
when the element is deformed by the transform, is no influence on the layout of other elements: Description of. Without departing from the document flow.
When the deformation element is the default center point along the element to deform the case
that when using a composite writing, except they shun hearing, can lead to different results, along hearing they do is parsed from back to front.
transform: translate (100px) rotate 60deg );
5, the origin is set properties: transform-origin
defined: transform-origin is a modification of the origin, i.e. the element around the point of rotation or deformation, the property is only when the transform property set function;
Description: transform-origin: Value a value of 2; a value of 1: values 2: vertical
PX% left Top right bottom;
. 6, backface-visibility: hidden div element is rotated back surface
backface-visibility: visible; visible (default)
backface-visibility: hidden; invisible
backface-visibility of bug: If the element is highlighted on the floor, give him a background color can be resolved after the end.
Three, CSS 3Dtransform property
transform
performance function:
. 1, transform: translate3d (X, Y, Z); 3D
transform: Translate (X, Y)
transform: the translateX ();
transform: translateY, ();
transform: translateZ (percentage can write, write only specific values); 3D
NOTE: Z axis value, set the time he can not set as a percentage, is defined only by specific numbers
2, Transform: Rotate ();
Transform: Rotate ();
Transform: rotateX ();
Transform : rotateY ();
Transform: rotateZ (); 3D
Transform: ROTATE3D (X, Y, Z, a); 3D
0: not rotated; 1: rotation
x: is a number between 0 and 1, it is mainly used to describe element vector value around the axis of rotation X;
Y: is a number between 0 and 1, the main elements of vector values used to describe the rotation around the Y axis;
Z: is a number between 0 and 1, is mainly used to describe element vector value around the Z axis;
a: an angle value is mainly used to specify the elements in the 3D space rotation angle, if its value is positive, clockwise rotation of the element, whereas the counterclockwise rotation of the element.
. 3, Transform: Scale3D ();
Transform: Scale3D (X, Y, Z); 3D
Transform: Scale (X, Y)
Transform: the scaleX ();
Transform: scaleY ();
Transform: scaleZ (); 3D
. 4, Transform-style 3D set space
attribute value:
Flat: in 2D space (default)
preserve-3d in 3D space
5, perspective: 200px; depth: from the screen to observe how far the elements, the smaller the value, the more significant. Near the far smaller is recommended to set property values at 900--1200;
Perspective by: 200px; (the parent element)
the Transform: Perspective by (1200px)
(use in child elements)
both conflict settings, it is recommended to set only the parent element, generally values between 900-1200
if you sight distance when the object is far enough, there will be substantially near the far smaller feeling
6, perspective-origin: origin setting, the home position, the element 3d observed (position ) angle of
perspective-origin: value 1 value 2; (parent element)
PX% left Top right bottom
. 7, Transform-Origin: XYZ; properties allow you to change the position of the converted element is provided base point position of the rotating element; Z can not be set% ;
Transform-Origin: 50% 50% 0;
(default)
