This is the 17th day of my participation in the August Challenge

The transform deformation

Transform is used to translate, rotate, scale, and tilt elements.

Properties:

  • Translate: translation
  • Rotate: rotating
  • Scale: zoom
  • Skew: tilt

translate

Two length units are required as arguments to move the element to the right and down the specified length.

.emoji{
transform:translate(100px,100px)
}
Copy the code

TranslateX and translateY can also be used to control the translation of elements along the X or Y axes using a unit of length, respectively.

.emoji{
transform:translateX(100px)
}
Copy the code

If a percentage is used as an argument, it is moved as a percentage relative to the element’s own width.

rotate

A parameter is required to specify the clockwise rotation of the element. This value can be either degrees (deg) or turns (turn).

Element rotation defaults to around the center of the element, and transform-Origin can be used to change the center of rotation.

.emoji{
transform-origin:0 0;
transform:rotate(-50deg)
}
Copy the code

scale

The parameter to the scale attribute is a number that represents the multiple of the element’s scale. One argument is the scale of the entire element, and two arguments are the scale multiple of the element in both X and Y directions. You can also use scaleX and scaleY to control the scaling of elements in different directions.

Transform-origin also applies to this property, specifying the origin from which the element is scaled.

skew

You can use the skew attribute to set the skew Angle of an element. The parameter is a two-angle value that indicates the skew in X and Y directions.

SkewX and skewY can also be used to control the skew of elements in different directions.

The transform shorthand

All of these attributes can be declared inside a transform, so we can have different transformations of an element at the same time.

Note: the deformation of elements is affected by the coordinate system, so different order may have different deformation.

The 3 d deformation

If you don’t set the 3D deformation effect, the rotation will look just like scaling. After setting the 3D deformation, we can see the rotation of the elements more intuitively.

Use the Perspective property to set the distance between the human eye and the screen. The closer the distance, the more obvious the effect.

Use the translate3D attribute to set the translation of an element in a 3D scene, which requires three units of length, representing the translation along the X, Y, and Z axes.

The emoji {transform: the perspective (100 px); translate3d(100px,100px,100px); rotate(80deg) }Copy the code

Transition

In CSS3, without using Flash animations and JS, we can add effects that show how elements change from one style of the same attribute to another, called transitions. Effects created through transitions can improve the user experience.

Transition-property: Specifies the property to specify the transition

Multiple attributes are separated by commas (,), and the all keyword is used if you want all attributes to perform transitions.

Using None gives no attributes a transition effect.

Most attributes of the element support transitions. Note that transitions must be from one valid value to another.

Transition-duration: specifies the duration of the transition effect

Transition-timing-function: a timing function for transitions

This property can be used to specify how the transition is executed. Optional values:

Ease: Default value, slow start, speed up, then slow down

Linear: Motion at a constant speed

Ease-in: to speed up exercise

Ease-out: slow down

Ease-in-out: Speed up and then slow down

Cubic – Bezier () : Specify the timing function yourself (seeCubic-bezier.com).

Steps () : Distributes the transition effects

The first value is a number that indicates how many segments to execute the transition.

The second value can be set to end, which performs the transition after time ends (the default), or start, which performs the transition when time begins. Steps (2,start);

Transition-delay: indicates the delay of the transition effect. It indicates that the transition is performed after a period of time

All of these attributes can be set at the same time using the Transition attribute, in any order, but if there are two delay times, the first must be the duration, and the second must be the delay time! `

​

Animation Animation

Animation properties allow for more complex style changes.

Usage:

  • Define keyframe styles
  • Apply animations to elements
@keyframes dowm{
from(
margin-top:0;
opacity:1;
)
to(
margin-top:100px;
opacity:0.3;
)
}
Copy the code

For example, in the code above, we use @keyframes to define the style of the keyframe, followed by “down” which is the style name, and we can customize the style name for later application.

We then define two keyframe styles, one for the beginning and one for the end.

Use the animation property to animate an element

  • Animation-name: specifies the name of the keyframe
  • Animation-duration: indicates the duration of the animation
  • Animation-timing-function: indicates the speed of transition between key frames
  • Animation-delay: indicates the delay of animation playback
  • Animation-iteration -count: indicates the number of iterations of the animation
  • Animation-direction: indicates the direction in which the animation is played (positive, negative)

Learn about browser support

During development, we often have to consider whether a variety of water is compatible with the major browsers, and the following sites can help us know which browsers are compatible and which are not. (As shown below)

  • caniuse.com
  • MDN CSS Reference
  • Codrops CSS Reference
  • QuirksMode.org CSS

​

​