CSS3 Elastic Layout &3d Animation

Usually we set perspective to the parent element, setting the current element causes a center point without a 3D view, and setting the parent element's ancestor element will cause the center point to be wrong because the parent element's ancestor element height may be different from the parent element. If you find that the element does not appear to be large and the distance becomes smaller at the time of rotation, you can see if perspective is giving the force parent element

The compound notation of animation

Just ensure that the first occurrence is the duration duration, the second occurrence is the delay time, and the other parameter order can be written by name Iteration-count Timing-function

Animation:  autorotate linear 5s    infinite;

ANIMATION.CSS Animation Library uses

You want the animated element to add a 1 animation name to add 2 animated

Animation finishes removing class
  Ending an event with an animation
One (' click ', Function () {}) binds events this way at once
$ (' img '). One (' Webkitanimationend mozanimationend msanimationend oanimationend animationend ', function () {}
  Browser compatibility animation events

Detach an animation
Find the @webkit where the animation is located-keyframes  @keyframes to the corresponding class copy all to the location you want to use
Call the animation directly

Web Fonts
Method 1:iconfont the Icon font Library of Ali to find the font and use it according to the downloaded document
Method 2: A font needs to be logged in enter the fonts you want to generate follow the instructions to import CSS
This method can be used for a particular paragraph of text on the interface

Web icons
Iconfont find the corresponding picture according to the document use
You can use the before after pseudo-element
Conent: ' \e600 ';

Absolute centering
Transform
    Position:absolute:
    top:50%;
    left:50%;
    Transform:translatex (-half width) translatey (-half height)
Flexible layout
    Parent Container Display:flex
          Justify-content:center;

    Child elements:
        Align-self:center;

Parent element Settings Display:flex
Child elements set flex:1; child elements divide the parent element equally
Child elements set different numbers divide the parent element by the number scale

Open elasticity
Display:flex;
Flex-direction:column; Flexible layout direction
If you modify the orientation of the elastic layout, the  x, y axes change
Justify-content:center; The default x-axis direction of the way

Flex-wrap:wrap; turn on line break if one line does not fit automatically
Properties for elastic layout child elements settings
Flex:1; The ratio can also be used for specific width and height
width:100px;
height:100px;
Align-self:center; Set your own way to it
Order:-1, smaller, more front can be set to negative by default to 0
Resilient layouts can be nested */

@keyframes autorotate{
    from{}
    to{
        
    }
}

. animated{

Animation:  autorotate linear 5s    infinite;
}

CSS3 Elastic Layout &3d Animation