HTML5+CSS3实现3D旋转卡片,开发工具:VS Code。
先看效果:
源代码:
<div class="card">
<!-- 卡片正面 -->
<div class="front">
<p>缘分让我们遇到~</p>
</div>
<!-- 卡片背面 -->
<div class="back">
<p>求点赞~</p>
<p>求关注~</p>
<p>求评论~</p>
<p>求收藏~</p>
</div>
</div>
*{
margin: 0;
padding: 0;
}
body{
/* 弹性布局,让页面元素水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 设置body高度为100%窗口高度 */
height:100vh;
/* 背景渐变色 */
background-image: linear-gradient(200deg,#5e