How CSS implements the card 3D rollover effect

This article mainly introduces the CSS to implement the 3D flip effect of the example code, I hope to help everyone.

Effect:

Code:

Html:

<p class= "main" >  <p class= "box B1" ></p>  <p class= "box B2" ></p></p>

Css:

. main {  position:absolute;  top:50%;  left:50%;  width:300px;  height:300px;  Transform:translate ( -50%,-50%);  -webkit-perspective:1500;  -moz-perspective:1500;}. box {  position:absolute;  top:0;  left:0;  width:300px;  height:300px;  Transition:all 1s;  Backface-visibility:hidden;  border-radius:10px;  Cursor:pointer;}. b1{  Background:skyblue;}. b2 {  background:tomato;  Transform:rotatey ( -180deg);}

Javascript:

var B1 = Document.queryselector (". B1"), var b2 = Document.queryselector (". B2"); B1.onclick = function () {  B1.style.transform = "Rotatey (180deg)";  B2.style.transform = "Rotatey (0deg)";} B2.onclick = function () {  b2.style.transform = "Rotatey ( -180deg)";  B1.style.transform = "Rotatey (0deg)";}

-webkit-perspective: Perspective effect

Backface-visibility: Hides the back of the rotated P element