CSS3: Case Study of image flip switching and analysis of important properties; css3 Case Study

CSS3: Case Study of image flip switching and analysis of important properties; css3 Case Study

Image flip switching. When CSS3 is not used, JavaScript is usually used for animation. Meanwhile, the width and left of the element, or height and top of the element are operated to simulate the flip effect, change src or z-index as appropriate to implement image switching.

Inadvertently found CSS3 solution, http://www.webhek.com/css-flip/ hurry to learn and summarize as follows

First run the code (most of them are copied from the above link, so there is a lot of compatibility issues. Be careful when using it)

HTML:

<div class="flip-container">    <div class="flipper">        <div class="front">here is content : AA</div>        <div class="back">here is content : BB</div>    </div></div> 

CSS:

. Flip-container {margin: 30px; display: inline-block; border: 1px solid # aaa;-webkit-perspective: 500;-moz-perspective: 500;-ms-perspective: 500; perspective: 500;-ms-transform: perspective (500px);-moz-transform: perspective (500px);/* Important */transform-style: preserve-3d; /* Important */}. flipper {position: relative; width: 200px; height: 200px; transition: 0.6 s; transform-style: preserve-3d;/* Important */}/* trigger flip */. flip-container: hover. flipper {transform: rotateY (180deg );}. front ,. back {position: absolute; left: 0; top: 0; backface-visibility: hidden;/* Important */width: 100%; height: 100% ;}. front {transform: rotateY (0deg); z-index: 2; background: red ;}. back {transform: rotateY (-180deg); background: green ;}

• Set the perspective attribute of the entire animation area on the container element at the outermost layer.
• When the outer container element encounters a mouse hover event, the container that stores the internal card rotates 180 degrees. This is also the place to control the rotation speed. If you set the rotation value to-180deg, It is a reverse rotation.
• It indicates that the elements on the front and back of the card must be absolutely positioned so that they can block each other at the same position. Their backface-visibility attribute is set to hide, so that the back of each card is invisible during flip.
• Set the front of the card to a z-index value higher than the back to ensure that the front of the card is at the top.
• Rotate the back card 180 degrees so that it plays the back role.

The process of copying is complete, and important notes are commented out in CSS.

The perspective attribute defines the distance between a 3D element and a view, in pixels. Intuitively, an element in the inner layer overflows the outer border when it is flipped. If it is not written, or the attribute value is 0, it is changed only within the outer border.

In addition, the attribute values must be especially noted to adapt to the width and height of the elements to be flipped. Too few overflow is exaggerated, and too many are slightly different from those set to 0. Shows the difference.

Transform-style: preserve-3d; the transform-style attribute specifies how nested elements are presented in 3D space (as copied from w3cschool ).

Both flip-container and flipper need to be set. If flip-container is not set, the overflow 3D effect is missing. If flipper is not set, after the container is flipped, we can see the back of front, backface-visibility: hidden cannot reflect the effect.

Transform-style is not supported even in IE11.

So there is another solution compatible with IE, that is, to flip the front and back at the same time without flipping the container. Fortunately, IE still supports backface-visibility: hidden, so the flip effect is consistent with the previous solution.

The HTML is as follows:

<div class="flip-container">    <div class="front">here is content : AA</div>    <div class="back">here is content : BB</div></div>  

Because front and back are directly flipped, flipper is redundant and flipper is removed.

The CSS code is as follows (after multiple trials, we try to support various browsers and downgrade browsers that do not support CSS 3 flip, keeping the switching effect)

 

. Flip-container {-webkit-perspective: 500;-moz-perspective: 500;-ms-perspective: 500; perspective: 500;-ms-transform: perspective (500px ); -moz-transform: perspective (500px);-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d; margin: 30px; display: inline-block; border: 1px solid # aaa; position: relative;}/* The height is missing due to the absolute positioning of the inner layer. Here, the width and height are explicitly set */. flip-container ,. front ,. back {width: 200px; height: 200px ;}. flip-container: hover. front {-webkit-transform: rotateY (180deg);-moz-transform: rotateY (180deg);-o-transform: rotateY (180deg);-ms-transform: rotateY (180deg); transform: rotateY (180deg );}. flip-container: hover. back {-webkit-transform: rotateY (0deg);-moz-transform: rotateY (0deg);-o-transform: rotateY (0deg);-ms-transform: rotateY (0deg); transform: rotateY (0deg); z-index: 3;/* downgrade processing does not support CSS3 browsers, but simply puts back up to cover front */}. front ,. back {-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;-webkit-transition: 0.6 s;-moz-transition: 0.6 s;-o-transition: 0.6 s;-ms-transition: 0.6 s; transition: 0.6 s; position: absolute; top: 0px; left: 0px ;}. front {background: red; z-index: 2 ;}. back {background: green;-webkit-transform: rotateY (-180deg);-moz-transform: rotateY (-180deg);-o-transform: rotateY (-180deg ); -ms-transform: rotateY (-180deg); transform: rotateY (-180deg );}

The above may have a lot of unnecessary compatible code, with a limited level. You are welcome to exchange more concise writing.

There is also a small TIPS, which should be used as follows when hover is used to trigger element flip in other cases. The parent element with a fixed width is triggered, and the child element is flipped

.outer {    width: 200px;    height: 200px;}.inner {    transition: 0.6s;}.outer:hover .inner{    transform: rotateY(180deg);}

The following problems may occur when the element hover triggers the flip operation. Because the element area decreases during the element flip process, the cursor is removed from the element, so the element is restored and the hover becomes smaller, resulting in poor performance

.inner {    width: 200px;    height: 200px;
　　transition: 0.6s;}.inner:hover{    transform: rotateY(180deg);}