<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.