<div class="container">
<div class="box">LEFT</div>
<div class="box">RIGHT</div>
</div>
.box {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #00aa9d;
}
.container {
margin: 0 auto;
width: 202px;
height: 100px;
display: flex;
justify-content: space-between;
transition: transform 2s;
}
.container:hover {
/* 沿着x轴旋转180° */
transform: rotateY(180deg);
}
/* 初始化 */
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.