一、效果
将鼠标移动到下面的方块上即可看到效果。
一只棕色的小狗从小溪边快速的跑过。
一句话
二、css 样式
/* 卡片区域 */
.rotate-card {
margin: 10px;
display: inline-block;
width: 180px;
height: 180px;
color: white;
user-select: none;
perspective: 50rem;
-moz-perspective: 50rem;
}
/* 前面和后面 在卡片被hover时的样式 */
.rotate-card:hover .front{transform: rotateY(-180deg);}
.rotate-card:hover .back {transform: rotateY(0);}
/* 前面和后面在卡片常规状态时的通用样式 */
.rotate-card .front, .rotate-card .back {
transition-duration: 400ms;
position: absolute;
backface-visibility: hidden;
border-radius: 8px;
overflow: hidden;
}
/* 下面是前面和后面各自常规下的样式 */
.rotate-card .front {
display: flex;
flex-direction: column;
justify-content: center;
justify-items: center;
text-align: center;
font-size: 35px;
width: 100%;
height: 100%;
}
.rotate-card .back{
background-color: #b4bccc;
transform: rotateY(180deg);
width: 100%;
height: 100%;
}
.bg-pink{background-color: #ff8d8d;}
三、html 结构
<div class="rotate-card">
<div class="back"><div style="margin: 10px">一只棕色的小狗从小溪边快速的跑过。</div></div>
<div class="front bg-pink">一句话</div>
</div>
Full text complete, Reproduction please indicate the source. Help you? Not as good as one:
Comment(Comments need to be logged in. You are not logged in.)
You need to log in before you can comment.