CSS3 Picture flipping switch case and its important attribute analysis

Picture flipping switch, in the case of not using CSS3, generally use JS to achieve animation, while manipulating the elements of the width and left, or height and top to simulate the effect of flipping, and in due course change src or z-index to achieve picture switching.

Inadvertently found CSS3 solution, http://www.webhek.com/css-flip/hurriedly learn and summarize the following

First on the code (most copied from the above link, there is a great compatibility problem, careful use)

Html:

<div class= "Flip-container" >    <div class= "Flipper" >        <div class= "front" >here is CONTENT:AA </div>        <div class= "Back" >here is content:bb</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.6s;    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;}

• Sets the perspective (perspective) property of the entire animation area on the outermost container element.
• When the outer container element encounters a rollover event, the container that holds the card internally rotates 180 degrees. This is where the rotational speed is controlled. If the rotation value is set to -180deg, it is reversed rotation.
• Indicates that the elements on the front and back of the card must be absolutely positioned so that they can mask each other in the same position. Their back visibility (backface-visibility) properties are set to hidden so that the back of each card is invisible when flipped.
• Set the front of the card to a higher z-index value than the back, so that the front of the card is at the top.
• Rotate the back card 180 degrees, so that it plays the back role.

Copy the end, where the CSS notes the important need for special attention.

The Perspective property defines the distance, in pixels, of the 3D element from the view. The intuitive phenomenon is that elements of the inner layer overflow the outer border when flipped, or if the property value is 0, only changes within the outer border.

and the attribute value needs special attention and needs to flip the elements of the wide height of the adaptation, too little overflow is exaggerated, too much and set to 0 the difference is not small. The difference effect is as shown

transform-style:preserve-3d; The Transform-style property specifies how nested elements are rendered in 3D space (copied from W3cschool).

Flip-container and Flipper both need to be set, Flip-container not set will cause the overflow 3D effect is missing, flipper not set then the container flips, we see the back of the front, backface-visibility : Hidden can not reflect the effect.

Compared to the pit is transform-style even in the IE11 is not supported.

So there is a compatible with IE scheme, is not to flip the container, but at the same time flip front and back, fortunately, ie or support backface-visibility:hidden, so the flip effect and the previous scheme is consistent.

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>  

As a direct flip front and back,flipper is superfluous, remove the flipper.

CSS code is as follows (after many experiments, as far as possible to support the various browsers, and degraded processing of the browser does not support CSS3 rollover, preserving the transition 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;}    /* Due to the high level of lack of absolute positioning of the inner layer, there is an explicit setting of the */.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 browser, just simply put back up to cover front */}.front,. back {-webkit-backface-visibility:hidden; -moz-backface-visibilitY:hidden;    -ms-backface-visibility:hidden;    Backface-visibility:hidden;    -webkit-transition:0.6s;    -moz-transition:0.6s;    -o-transition:0.6s;    -ms-transition:0.6s;    transition:0.6s;    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 many unnecessary compatible code, the level is limited, welcome to communicate more concise wording.

There is also a small tip that, in other cases, should be used when using the hover trigger element to flip, a fixed-height parent element is triggered, and the child element flips

. outer {    width:200px;    height:200px;}. inner {    transition:0.6s;}. Outer:hover. inner{    Transform:rotatey (180deg);}

The following directly on the element hover trigger flip will have a lot of use problems, because element flipping process, the element area becomes smaller, the cursor is detached from the element, so the element is restored, and the trigger hover smaller, resulting in a non-smooth

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

CSS3 Picture flipping switch case and its important attribute analysis