A transform.

The transform properties include: rotate()/skew()/scale()/translate()

  • The rotate() function uses the specified Angle argument to rotate elements in the unit of deg based on the object’s origin.

  • Skew – Skew the skew() function skews elements

  • Translate – Moves elements in a specified direction, similar to relative in position.

  • Scale – Lets the element scale the object based on the central origin. The default is 1

  • transform-origin: x-axis y-axis z-axis; – Sets the base position of the rotation element

  • transform-style (flat/preserve-3d)

2. The transition

transition: property duration timing-function delay;

  • transition: property duration timing-function delay;

  • 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: specifies the speed curve for the speed effect.

  • The transition – delay, delay

Three animation.

animation: name duration timing-function delay iteration-count direction;

The difference between animation and Transition

  • Similarities: Both change the value of an element’s attributes over time

  • Differences: Transition needs to trigger an event (such as the Hover event or click event) to change its CSS properties over time; Animation can also explicitly change the attribute value of element CSS over time without triggering any event, so as to achieve an animation effect. Css3 animation needs explicit animation attribute value.

5. CSS 3 d

3D transformation in CSS3 mainly includes the following functions:

  • 3D displacement: 3D displacement in CSS3 mainly includes translateZ() and translate3D ();
  • 3D rotation: 3D rotation in CSS3 mainly includes four functional functions rotateX(), rotateY(), rotateZ() and Rotate3D ();
  • 3D scaling: 3D scaling in CSS3 mainly includes two functional functions scaleZ() and Scale3D ();

Perspective – the depth of field

  • Depending almost small
  • perspective: 1200px; (used in the parent element)
  • Transform: Perspective (1200px) (used in child elements)

Perspective-origin – The perspective from which 3d elements are viewed

  • Perspective-origin: center Center
  • Perspective-origin: left top (top left)
  • Perspective-origin: 100% 100% (bottom right)

CSS implements rotation cube

CSS rotation cube case demo

7. Extension

  • There’s no link to this video because it’s pretty basic
  • The default parameter for transform-origin is?
  • CSS implements a 3D rotating cylinder (attached with github address of the implementation)