<div class="card">
  <div class="content">
  </div>
</div>
<div>hover on</div>
.card {
  height: 200px;
  width: 200px;
  background: orange;
  /* 设置perspective达到透视效果 */
  perspective: 400px;
  perspective-origin: top;
}

.content {
  width: 100%;
  height: 100%;
  background: lightblue;
  /* 设置变换 */
  transform: rotate3d(1, 0, 0, -0.25turn);
  transform-origin: top left;
  transition: all 1s;
}

.card:hover .content {
  transform: rotate3d(1, 0, 0, 0turn);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.