CSS Warp Animation horizontal, flip element vertically

CSS3 2D Deformation properties, scale: Used to zoom elements (zoom in and Out), translate: Move elements on the screen (up or down), rotate: Rotate elements at a certain angle (in degrees), skew: chamfered elements along the x and y axes, matrix: Allows the distortion effect to be controlled with pixel precision. The deformation occurs outside of the document. A deformed element does not affect the position of the non-deformed element near it.

Transform-origin: Note In CSS, the default Morph origin is in the positive center: 50% of the x axis of the element and 50% of the Y axis. This is different from the default upper-left corner of SVG. With Transform-origin, we can modify the origin of the deformation. The first value is the offset in the horizontal direction, and the second value is the offset in the vertical direction. The keyword represents the value of the direction. If you use lengths, they calculate the point position relative to the upper-left corner of the element.

CSS3 Implementing Flip Elements

. Flipper{Perspective:400px;position:relative;width:300px;Height:44px;}. Flipper +. Flipper{Margin-top:1em;}. Flipper-object{position:Absolute;width:100%;Height:100%;transition:transform 1s;Transform-style:preserve-3d;}. Panel{Display:Flex;Min-height:44px;Align-items:Center;justify-content:Center;Top:0;width:100%;Height:100%;position:Absolute;backface-visibility:Hidden;}. flipper-vertical. back{Transform:Rotatex (180deg);}. Flipper-horizontal. back{Transform:Rotatey (180deg);}. Back{Background-color:#CC3232;}. Front{Background-color:#739328;}. Flipper:hover. flipper-vertical{Transform:Rotatex (180deg);}. Flipper:hover. Flipper-horizontal{Transform:Rotatey (180deg);}

The key elements are: transform-styles:preserve-3d; this tells the browser that when we want to create a morph effect for this element, its child elements also maintain a 3D effect. Perspective can set perspective for elements (browser support is not good). Backface-visibility:hidden; This property defines whether elements are hidden when they are not element-oriented. The default hidden element can be flipped 180 degrees. When hover, the element flips 180%.

Transform3D This property, you can move elements on the x, Y, Z axis.

The best use of transform3d is to move the panel into the move-out screen, especially in the off-screen navigation mode.

CSS Warp Animation horizontal, flip element vertically