Home > Article > Web Front-end > css3 transitions and 2d transforms—review

css3 transitions and 2d transforms—review

高洛峰Original: 2017-02-21 11:24:221307browse

1.transition
Syntax: transition: property duration timing-function delay;
Transition-property Set the css property name of the transition effect
Syntax: transition-property: none | all | property
None No properties will get transition effects
All properties will get transition effects.
　　　　　property defines a list of CSS property names for applying transition effects. The list is separated by commas.
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ]over how many seconds or milliseconds it takes to complete the transition effect
　　　　 Syntax: transition-duration: time; The default value is 0, which means there will be no effect.
Transition-timing-function specifies the speed curve of the speed effect.
Syntax: transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
Linear specifies the same speed A transitional effect from start to finish.
　　　　　　　ease stipulates to start at a slow speed, then go fast, and then end at a slow speed.
　　　　　　ease-in specifies an excessive effect that starts at a slow speed.
　　　　　　ease-out specifies an excessive effect that ends at a slow speed.
　　　　　　ease-in-out specifies a transition effect that starts and ends at a slow speed.
　　　　　cubic-bezier(n,n,n,n) Define your own value in cubic-bezier. Possible values are values between 0 and 1.
　　　 transition-delay　Defines when the transition effect starts
　　　 Syntax: transititon-delay: time;
　　time specifies the time to wait before the transition effect starts.

Example:

;width:300px;height:150px;}

　　
　　

## Example: (Bezier curve)
1.295,0.000,1.610);}
　　　　.box:hover{width:500px;}
　　　

Result: As shown in the figure css3 过渡和2d变换—回顾

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　uting Me >> .box{width:100px;height:100px;background :red; transition:1swidth,2s height,3s background;}
　　　.box:hover{width:300px;height:150px;background:blue;}
　　　
　　　

Result: As shown in the figure

css3 过渡和2d变换—回顾

##2.transform

The letters are transformed. The meaning of change, in CSS3, transform mainly includes the following types, rotation rotate, skew, scale and translate, as well as matrix transformation matrix
Syntax: transform: none | [ 　　　　　That is: transform: rotate | scale | skew | translate |matrix;

None means how to transform without entering; means one or more transformation functions, with spaces Separate;

There are three types of rotate, scale, and translate, but I need to remind everyone here that in the past, our overlay effects were separated by commas (","),

　　　　　 But when using multiple attributes in transform, they need to be separated by spaces. Remember, they are separated by spaces.

　　　　　rotate
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　over forward in word to specify a 2D rotation (2D rotation) on the original element through the specified angle parameter, you need to first define the transform-origin attribute.
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ccogene Over in in >>, where angle refers to the angle of rotation
　　　　　　　 If the set value is a positive number, it means clockwise rotation, if the set value is a negative number, it means counterclockwise rotation.
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Move at the same time); translateX(x) only moves in the horizontal direction (X-axis movement) translateY(Y) only moves in the vertical direction (Y-axis movement)

　　　　　　　Scale

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　duct[Y] could only move in the vertical direction (Y-axis movement]_ There are also three situations: scale(x,y) causes the element to scale horizontally and vertically at the same time (that is, the X-axis and Y-axis scale simultaneously); scaleX(x) the element only scales horizontally (X-axis scaling);

The scaleY(y) element only scales in the vertical direction (Y-axis scaling), but they have the same scaling center point and base,
Its center point is the center position of the element, and the scaling base is 1. If its value is greater than 1 element If the value is less than 1, the element will shrink. At the same time, it is distorted according to a certain angle value); skewX(x) only distorts the element in the horizontal direction (X-axis distortion);

　　　　　　　　　skewY(y) only makes the element distorted in the vertical direction (Y Axis twist deformation)

Matrix matrix
Specifying a 2D transformation in the form of a six-valued (a, b, c, d, e, f) transformation matrix is equivalent to directly applying a [a b c d e f] transformation matrix, which is based on the horizontal direction (X axis). Reposition the element in the vertical direction (Y-axis) and change the base point of the element transform-origin. Its main function is to allow us to change the base point position of the element before performing the transform action,

Because the default base point of our element is Its center position, in other words, when we do not use transform-origin to change the base point position of the element, operations such as rotate, translate, scale, skew, and matrix performed by transform are all based on the center position of the element.

Example: (rotation)

.box:hover { -webkit-transform:rotate(45deg);}

## transition:2s;}
.box:hover{-webkit-transform:translate(-100px,200px);}
/p>
　　　Result: The position of the element changes.

　　　　 Example: (zoom) box: hover{webkit-transform:scale(2);}
　　　　
　　# }
　　　　　　　　.box:hover{-webkit-transform:skewX(45deg);}
　　　: As shown in the figure

Example: (matrix)

100px auto 0; transition:2s;} css3 过渡和2d变换—回顾　　　　　　　　　　　　　　　　　　　　　　　　　　　　

111

　　　　Result: as shown

　　　　　

　　　　　　　　demo 示例：
　　　　　　　　　　
　　　　　　　　　　