##CSS implements card flip effect transform-style this property cannot be inherited
.card{ width: 200px; height: 200px; position: relative; margin: auto; transition: transform 3s; transform-style: preserve-3d; } .card-face{ width: 100%; height: 100%; position: absolute; } .card-front{ background: orange; } .card-back{ background: palegreen; transform: rotateY(180deg); } .card:hover{ transform: rotateY(180deg); </style> </head> <body> <div class="card"> <div class="card-face card-front" Card-back "> </div> </div> ' 'Copy the code