To implement a positive and negative conversion, adjust the big box. The box after excessive effects found small box was a flash of color and solving ~
& lt; Style>
Body {
Perspective: 400 px;
}

The box {
position: relative;
Width: 300 px;
Height: 300 px;
Margin: 100 px auto;
/* conversion speed when look not to come out, turn into side 4 s, saw instant impression switch 2 times */
The transition: all. 4 s;
transform-style: preserve-3d;
}

Box: hover {
The transform: rotateY (180 deg);
}

Front,
. The back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
The font - size: 30 px;
Color: # FFF.
text-align: center;
The line - height: 300 px;
}

The front {
Background - color: pink.
z-index: 1;
}

. The back {
Background - color: purple;
The transform: rotateY (180 deg);
}
& lt;/style>


& lt; body>
& lt; Div & gt;
& lt; Div & gt; Positive positive & lt;/div>
& lt; Div & gt; On the back of the back & lt;/div>
& lt;/div>
& lt;/body>