Try it Yourself: Graphics and 3D

Graphics and 3D

<!DOCTYPE html>
<html>
<head>
<style>
.card {
  perspective: 800px;
}
.card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.card:hover .card-inner {
  transform: rotateY(180deg);
}
</style>
</head>
<body>

<div class="card">
  <div class="card-inner"></div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.card {
  perspective: 800px;
}
.card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.card:hover .card-inner {
  transform: rotateY(180deg);
}
</style>
</head>
<body>

<div class="card">
  <div class="card-inner"></div>
</div>

</body>
</html>