OpenPose Installation Configuration Fool Version Tutorial

2023-01-20   ES  

Transform, Translate, Translaton, Animation Animation

Chatting with friends when I was not busy recently, and found that the memory of myself and transform turned out to be so vague. Because I usually used less, it is easier to remember. I was beaten like today ~~

TRANSFORM in CSS3 mainly includes the following:Rotate rotateTurn SKEWScalf SCALEmobile translateandmatrix deformation Matrix
rotation: Rotate () Rotate the given angle clockwise, allow negative value Rotate (30DEG)
Twist: SKEW () Element Flip the given angle, according to the given horizontal line (X -axis) and vertical line (y -axis) parameters: SKEW (30DEG, 20DEG)
scaling: Scale () amplifies or reduces, according to the given width (X -axis) and height (Y axis) parameters: Scale (2,4)
Mobile: Translate () translation, transmitted into x, y values, which represents the distance between the X -axis and the y -axis: Translate (30px, 50px)

Whether it is rotating or stretching, it is essentially the application MATRIX () method to implement (modify the Matrix () method to fix a few values), but it is similar to the expression form of transform: rotate, and it is easier for us to understand , Memory and get started.
All 2D conversion methods are combined: matrix () rotation, zooming movement, and tilt elements.

Transform: Rotate rotation | Scale zoom | SKEW twisted | Translate mobile | Matrix matrix deformation;
Integrity: Transform: 30DEG 1.5 30DEG 20DEG 100px 200px; // Need space to separate

Transform rotation is a rotation around a center point, and this center point is the point corresponding to the transform-origin property, and it is also an important basis for all matrix calculations.
Change the starting point location transform-Origin: bottom left;

Translate is a method of Transform. Translate represents movement. Through the Translate method, the element moves from the current position to coordinates according to the given X (Left) and Y (TOP) coordinates.

transform:translate(50px, 100px);// Element /3 3position:absolute;

Transition allows the CSS attribute to be smooth in a certain period of time. Transition specifies how a certain attribute (such as Width) transition between two values.

Transition mainly contains four attribute values:

  1. The attribute of the transformation: transition-partty;
  2. The time for transformation: transition-duration;
  3. During the duration period, the change rate change: transition-timing-function // Example:

Value: Ease (slowly slow down), linear (uniform speed), Ease-in (from slow to fast), ease-out (from fast to slow), ease-in-out Cubic-bezier (this value allows you to customize a time curve).

  1. Change delay time: transition-delay

Requires the event trigger, such as clicking, getting the focus, loss of focus, etc.
grammar:transition: property duration timing-function delay;
For example: transition: width 2S Ease 0s;

Animation is also to achieve animation by specifying how to transition between two values by specifying a certain attribute (such as Width).

// Define animation@keyframes move {
@keyframes move {

call animation
Animation: Animation name Animation Time Animation Speed Animation Delayed Animation Times Animation Intelligent Play Status The Status of Animation

  1. Animation name: Animation-name
  2. Animation time Animation-duration
  3. Animation speed Animation-Timing-Function: Linear (Vulgar start, end at low speed) Steps ()
  4. Animation delay Animation-Dlay
  5. Animation-purpose-count: Infinite
  6. Animation direction Animation-Direction:
  7. Animation Play Status: Animation-PLAY-State: Running Pause
  8. When the animation is completed: Animation-FILL-MODE: Forwards Backwards
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
       .box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
            animation: move 5s linear infinite;
       @keyframes move {
               left: 100px;
               left: 150px;
               left: 200px;
    <div class="box"></div>

andtransitionThe difference is:

  1. animationcan display the attribute value of the current frame through keyframe, andtransitioncan only be carried out in hidden formula (the attribute value of each frame cannot be specified), so relatively speaking

    The function ofanimationis more flexible.

  2. animationThrough the changes in the value of the simulation attribute, the animation is achieved. After the animation is over, the attributes of the element have not changed; andtransitonIndeed the attribute value of the element, and the attributes of the element have changed after the animation is over; this will produce a large difference in actual applications.


Related Posts

Title 1343. Squeeze milk

Read the HDFS directory and display the content in the file on the web page

FLINK SQL Client Register Python UDF Full Process

HDU2068 RPG has not been done yet! Intersection Intersection Combination

OpenPose Installation Configuration Fool Version Tutorial

Random Posts

JSOUP parsing the error of the file path of the XML report, perfect solution. Patriotic XML uses JSOUP1. Use JSOUP to complete the analysis of Student.xml, and give the parsed data to the Student object, and finally output the object on the console.

webView and JS interact all methods and use

qt (5.10.0) for Android

System Integrated Software Sensor Limited Management

Vue-AWSOME-SWIPER installation and CSS introduction problem