preface

There are several properties in CSS that are particularly similar. They are the transition, the transform and animation. For those of you who aren’t sure what translate means, let’s start with a quick introduction.

attribute meaning
The transition transition The style transitions used to set elements have a similar effect to animation, but the details are quite different
The transform deformation It is used to rotate, scale, move, or tilt an element, and has nothing to do with the animation that sets the style, just as color is used to set the “appearance” of an element.
Animation animation CSS Animation Properties
Translate the mobile It’s just a property value of transform, which is move.

The transition transition

Literally, the transition of an element from one value of this attribute (color) (red) to another value of this attribute (color) (green) is a state transition that requires a condition to trigger the transition, Examples include: Hoever, : Focus, : Checked, media queries, or JavaScript.

A transition rule defines changes in multiple properties separated by commas (,). For all properties, use “all”.

Transition: property duration timing-function delay;

value describe
transition-property Specifies the name of the CSS property that sets the transition effect
transition-duration Specifies how many seconds or milliseconds it takes to complete the transition effect
transition-timing-function The speed curve specifying the speed effect
transition-delay Define when transition effects begin

I’ve found that the order of abbreviations is not always dead, and I’ve tested it on Chrome as long as the delay comes after duration. Of course it’s best to write it according to the standard.

Demo

<! DOCTYPE html> <html lang="en">
<head>
  <title>transition</title>
  <style>
    #box {
      height: 100px;
      width: 100px;
      background: green;
      transition: transform 1s ease-in 1s;
    }

    #box:hover {
      transform: rotate(180deg) scale(.5, .5);
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>
</html>
Copy the code

The effect

  1. It needs to be triggered by an event, so it can’t happen automatically when the page loads
  2. It’s a one-off, it can’t happen again unless it’s triggered again and again
  3. You can define only start and end states, not intermediate states, that is, only two states

Animation animation

It makes up for many of the shortcomings of transition, which is more maneuverable and can make complex and cool effects

Animation: name duration timing-function delay iteration-count direction play-state fill-mode; animation: name duration timing-function delay iteration-count direction play-state fill-mode;

value describe
@keyframes Provisions of the animation
animation Short for all animation properties except animation-play-state
animation-name Used to call the animation defined by @keyFrames, the same animation name defined by @KeyFrames
animation-duration Specifies the number of seconds the animation takes to complete a cycle. The default is 0
animation-timing-function Specifies the speed curve of the animation. The default is “ease”
animation-delay Specifies when the animation should start. The default is 0
animation-iteration-count Specifies the number of times an animation is played. The default is 1
animation-direction Normal (in chronological order),reverse(running in the opposite direction of the time axis),alternate(alternating),alternate-reverse(animation runs first in the opposite direction and then in the positive direction, and continues to run alternately)
animation-play-state Controls the playback state of the element animation, using which to control the animation to pause and resume, two values: running, paused
animation-fill-mode Controls the style of the element after the animation is over, with four values: None (back to the state before animations start), forwards(animations stay at the end after animations end), backwords(animations return to the first frame), both(animations are forwards and backwards in rotation according to animation-direction), Be careful not to conflict with rotund-count (animation executes indefinitely)

For example, if we rotate a div around once, we only need to define the start and end frames:

@keyframes rotate{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); }}Copy the code

Is equivalent to

@keyframes rotate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }}Copy the code

Once you have defined the keyframe, you can use it directly:

animation: rotate 2s;
Copy the code

The timing-function of transition and animation can be customized using cubic bezier

The transform deformation

The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements.

Grammar: transform: none | transform – functions provides;

The transform can set multiple transformations, executed from left to right, separated by no commas. Such as:

transform: translateX(100px) rotate(90deg);
Copy the code

This part is divided into three summaries: pre-attribute, 2D transform and 3D transform

Pre-attribute explanation

value describe
transform-origin Used to specify the center point of an element’s deformation
transform-style Specifies the stage to be 2D or 3D
perspective Specify 3D stadia
perspective-origin The base point of line of sight
backface-visibility Can you see the back of the 3D stage

transform-origin

Used to specify the center point of an element’s deformation. The default center is exactly the center of the element, at 50%, 50%, and 0 of the XYZ axis. You can use this attribute to change the center point of an element on the XYZ axis. A positive value indicates a positive displacement, and a negative value indicates a negative displacement. The positive directions of the XYZ axis are to the right, down, and near the user’s eye. Vice versa)

X-offset /y-offset = px / % / % / top/right/bottom/left/center Z-offset can only be set to px, % %, or keyword.

The default center is in the center of the element, so the keyword top is equivalent to top center is equivalent to 50% 0% (the X-axis remains at 50% and the Y-axis is shifted to 0%). Similarly, keywords such as “right” are equivalent to “right Center”, which is equivalent to “100%” and “50%”.

An image is worth a thousand words: After setting different center points for the image, see how they rotate, twist, and zoom. For example, the first line center in the table header in Figure 1 indicates transform-Origin: center. The second line of the rotate (30 deg); According to the transform: rotate (30 deg); .

transform-style

This property is relatively simple and has only two values flat and preserve-3D. Used to specify that the stage is 2D or 3D. The default flat indicates a 2D stage, where all child elements are presented in 2D. Preserve – 3D, as the name suggests, represents a 3D stage, where all child elements are presented in 3D. Note that it is not useful to specify this property on the morphing element itself; it is used to specify the stage, so set this property on the parent element of the morphing element. Once set, all child elements share the stage. A picture is worth a thousand words:

.div1 {
    float: left;
    background-color: red;
    transform: perspective(200px) rotateY(45deg);
}
.div1 img{
    transform: translateZ(16px);
}
.p3d {
    transform-style: preserve-3d;
}
<div class="div1"><img src="head75.png" /></div>
<div class="div1 p3d"><img src="head75.png" /></div>
Copy the code

perspective

Specify 3D stadia. The default value is None to indicate no 3D effect, i.e., 2D flattening. This property is already used in the example code above. Before introducing it, let’s use rotateX/rotateY/rotateZ to clarify the basic concept of xyz coordinates. A picture is worth a thousand words, rotateX rotation, rotateY rotation, rotateZ rotation:

.x {
    transform: perspective(200px) rotateX(60deg);
}
.y {
    transform: perspective(200px) rotateY(60deg);
}
.z {
    transform: perspective(200px) rotateZ(60deg);
}
<img class="x" src="head75.png" />
<img class="y" src="head75.png" />
<img class="z" src="head75.png" />
Copy the code

The key to 3D is to have a perspective. If you remove the perspective(200px) from the above code, it looks like this:

perspective

Perspective can only set px values, not % percentages. A smaller value means the user’s eyes are closer to the screen, creating a larger 3D stage. Conversely, a larger value means the user’s eyes are farther away from the screen, creating a smaller 3D stage. It’s easy to understand, things look bigger as they get closer, and things look smaller as they get farther away. But how do you set it? Use a W3C diagram with translateZ to help understand the stadia.

In the figure, D is the perspective distance, and Z is the displacement of the translateZ axis. The 3D stage will be enlarged when the Z axis is shifted forward. Conversely, the 3D stage will shrink when the Z axis is shifted negatively. Above Z is half of D, so the elements on the 3D stage will be twice as large. Below Z is also half of D, but because it is negative, the elements on the 3D stage will shrink by one-third. Actually try:

.divsp {
    display: inline-block;
    border: 1px blue dashed;
    margin-left: 30px;
    perspective: 100px;
}
.z1 {
    transform: translateZ(-75px);
}
.z2 {
    transform: translateZ(0px);
}
.z3 {
    transform: translateZ(25px);
}
.z4 {
    transform: translateZ(101px);
}
<div class="divsp"><img class="z1" src="head75.png" /></div>
<div class="divsp"><img class="z2" src="head75.png" /></div>
<div class="divsp"><img class="z3" src="head75.png" /></div>
<div class="divsp"><img class="z4" src="head75.png" /></div>
Copy the code

The visual distance of each image is 100px, which means the 3D stage of each image is 100px away from your eyes. Let’s go from right to left. Figure 4 translateZ (101 px) see pictures disappear, because the 3 d stage 100 px from your eyes, and images from the stage to the Z axis positive displacement 101 px, natural can’t see anything behind the images in your head. If you make it translateZ(100px), the image is close to your eyes, so the image is full screen. TranslateZ of picture 3 (25px), the original image is 75px, the enlarged image is 100px. This is a junior high school math problem. You can draw an isosceles triangle with a base of 75px and a height of 75px. Then expand the height to 100px and increase the base by one third to 100px. The translateZ(0px) in Figure 2 indicates that the Z-axis has no displacement and therefore remains the original size. TranslateZ (-75px) in figure 4, the same math problem, the original image was 75px, reduced to 42.85px, look at the W3C image above to understand, it is very easy to calculate.

Transform: Perspective (200px) rotateX(60deg); rotateX(60deg); . This code assigns perspective: 100px to the parent div of the img element; . You can think of the former as the Perspective () function and the latter as the Perspective attribute. There is a difference between the two ways of specifying:

The former perspective() function specifies that it is only for the currently deformed element and needs to be used along with the transform other functions to represent only the viewdistance of the currently deformed element. The latter perspective property is specified for the 3D stage, which is the view distance of the 3D stage shared by the child elements within it

perspective-origin

To set the base point of view, look at the W3C diagram

perspective 

.td1 { 
    transform-style: preserve-3d;
    perspective: 200px;
    perspective-origin: center;
}
Copy the code

backface-visibility

This is used to determine whether the back of the 3D stage can be seen. The default value is Visible to indicate that the back is visible, and can be set to Hidden to make the back invisible. This property is usually useful when you’re rotating, if you don’t want the back to show up, just set it to Hidden. A picture is worth a thousand words:

.stage{
    float: left;
    margin: 5px;
    perspective: 200px;
}
.container {
    transform-style: preserve-3d;
}
.image {
    backface-visibility: hidden;
}
.front {
    position: absolute;
    z-index: 1;
}
.back {
    transform: rotateY(180deg);
}
.stage:nth-child(1) .container{ transform: rotateY(0deg); }
.stage:nth-child(2) .container{ transform: rotateY(30deg); }
.stage:nth-child(3) .container{ transform: rotateY(60deg); }
.stage:nth-child(4) .container{ transform: rotateY(90deg); }
.stage:nth-child(5) .container{ transform: rotateY(120deg); }
.stage:nth-child(6) .container{ transform: rotateY(150deg); }
.stage:nth-child(7) .container{ transform: rotateY(180deg); }

<div class="stage"<div class= "<div class="container">
        <img class="image front" src="head75.png" />
        <img class="image back" src="bg75.png" />
    </div>
</div>
Copy the code

At this point, the five leading attributes are introduced. They are mostly used in 3D situations, so a common 3D HTML structure is as follows:

< stage > // Add perspective < container > // add preserve-3D to the stage so that the elements in the container share the same 3D rendering environment < element > // Add transform effect to the elements </ container > </ stage >Copy the code

2 d deformation

value describe
translate Sets the translation of an element on either the X or Y axes
scale Sets the scale of the element on the X or Y axis
rotate Rotate in two dimensions is rotating around the screen normal vector, which is the same thing as rotateZ
skew Set the X – and Y-axis tilts
matrix Define a 2D transformation using a matrix of six values

Rotate /translate/screw can be directly set to Matrix to achieve the same effect

Translate displacement

Translate displacement series used in 2 d are: translate, translateX, translateY single value indicates that only the X axis displacement, Y coordinates are the same

The sample

transform: translate(100px); Equivalent to transform: translate(100px,0) transform: translateY(100px); Equivalent to transform: translate(0, 100px);

Position is used for page layout, while Translate is a family of transforms used for element transformations. You may think that the semantics are different, what’s the use of the effect is OK? Depends on what criteria you use to measure effectiveness. The magic of CSS is that you can use a property in situations that are completely contrary to its intended meaning, which can sometimes be slightly different, regardless of code readability. When combined with animation effects, Translate can be less than 1px, so the animation is smoother. However, the minimum unit of position is 1px, so the animation effect is definitely compromised. In addition, when implementing an animation with Translate, you can use the GPU, and the animation has a higher FPS, which position obviously doesn’t enjoy. Others, such as reflux and repainting, are also different. So if you use position where translate should translate, you won’t have much to complain about if some future requirement change falls short.

Scale zooming

Scale for 2D: scale, scaleX, scaleY

The rotate rotating

Rotate The rotate series is rotate for 2D

Rotate Rotate is simple. Only a single value can be set. Positive numbers indicate clockwise rotation, negative numbers indicate counterclockwise rotation. As the transform: the rotate (30 deg);

Skew distortion

Skew for 2D: Skew, skewX, skewY

Skew distortion can be set to single and double values. Single value indicates that only X-axis is distorted and Y-axis remains unchanged, such as Transform: Skew (30DEg). Equivalent to transform: Skew (30DEg, 0); . Single values are not recommended for readability and should be used transform: skewX(30DEg); .

Matrix matrix

  • The transformation matrix of 3 by 3
  • You convert a two-dimensional vector

    Where x1 and y1 are vectors transformed by Matrix. According to the formula, the Matrixe, fMainly used to set the translation of elements on the X and Y axes.a, dThis is used to set the scale of elements on the X and Y axes.a,b,c,dUsed to set the rotation of elements in the XY plane.rotate/translate/screwAnd so on can be set directlyMatrixTo achieve the same effect

The 3 d deformation

value describe
translate3d The 3 d displacement
scale3d The 3 d scale
rotate3d 3 d rotation
matrix3d 3D matrix transformation

Translate3d displacement

Translate3d series for 3D: Translate3D, translateZ

Translate3d (tx, TY,tz), where the z-axis length of TZ can only be a px value, but cannot be %

Scale3d zoom

Scale3d series for 3D are: Scale3D, scaleZ

Scale3d (sx, SY, Sz), where Sz is the scaling proportion of z-axis. The value is the same as sx and SY. When the element is smaller than 0.01 ~ 0.99, the size remains unchanged when 1, and the element becomes larger when greater than 1. ScaleZ is equivalent to scale(1,1,sz). Note that using Scale3D or scaleZ alone will not have any effect, it needs to be combined with other attributes on the 3D stage, otherwise the z-axis scale cannot be defined at all.

The rotate3d rotation

Rotate3d rotation series for 3D are: Rotate3D, rotateX, rotateY, rotateZ

Rotate3d (x,y,z,a) Represents the Angle of rotation on the 3D stage, and the value of XYZ from 0 to 1 is the rotation vector value of each axis.

Matrix3d matrix

Finally, matrix3D matrix is the essence of all 3D deformation, all of the above 3D deformation effects can be used to achieve matrix3D matrix.

CSS3 transform Properties CSS3 transform properties CSS3 transform properties CSS3 transform properties