效果显示
一、建立html结构
1. 样式表用于导入相关样式
2.骨架结构为Card->(front,back)，用于分别表示正面、背面
3.最后引入js来控制事件。为什么不直接在css里设置伪类来控制动画呢？看之后解释。
<link rel="stylesheet" href="preSet.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="card">
<div class="front">
<p>欢迎进入我的世界</p>
</div>
<div class="back">
<p>点赞</p>
<p>关注</p>
<p>收藏</p>
<p>找到我</p>
</div>
</div>
<script src="rotate.js"></script>
</body>二、书写相关样式
需要解决的问题：
如何让卡片的两个div显示为一前一后
preSet.css设置。其实跟之后的写一起也行，毕竟没设置多少东西。
* {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
html {
font-size: 10.98px;
}index.css设置
2.1问题解决:
设置属性 ： transform-style: preserve-3d;
该属性可以让盒子的子元素布局在三维上。具体解释可以看MDN文档。
body {
/* 背景色设置 */
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
/* 满屏视高 */
height: 100vh;
/* 设置居中显示 */
display: grid;
grid-template-rows: 1fr;
place-items: center;
}
.card {
/* 为之后子元素定位做铺垫 */
position: relative;
/* 设置宽高，边角弧度，背景色，阴影 */
width: 20rem;
height: 37rem;
border-radius: 0.6rem;
background-color: #fff;
box-shadow: 0.1rem 0.4rem 2rem rgba(0, 0, 0, .1);
/* 设置为3d盒子 */
transform-style: preserve-3d;
perspective: 1000px;
}设置两个子元素样式
2.2问题解决
在如上设置了父元素的3d模式后，我们发现子元素并没有一前一后，而是共同显示在前面。这是因为当前两个子元素依然都在视觉的前方显示。
backface-visibility: hidden;首先让子元素在背部时显示隐藏
transform: rotateY(180deg);让back提前转到后面
.card :is(.front, .back) {
/* 绝对定位，使之占满父元素 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 设置内容居中，间距为四周 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
font-size: 20px;
/* 设置背部不可见 */
backface-visibility: hidden;
}
.card .back {
/* 预先让back盒子旋转180度转到盒子背面 */
transform: rotateY(180deg);
}设置动画：两个动画分别用于从前往后转，从后往前转
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
@keyframes rotate-r {
0% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0);
}
}三、书写js相关
我们可能考虑到使用CSS的:hover伪类来添加动画，但是这样设置会引起多次触发的问题，有一说一，我也不知道咋回事哈哈哈。总而言之还是用js控制吧
const card = document.querySelector(".card");
card.addEventListener("mouseenter",e=>{
card.style.animation = "rotate 1.2s cubic-bezier(0.165, 0.84, 0.44, 1)";
})
card.addEventListener("mouseleave",e=>{
card.style.animation = "rotate-r 1.2s cubic-bezier(0.165, 0.84, 0.44, 1)";
})四、结尾
以上完成了旋转卡片的全部内容。
作者也是小白，代码可能有更好的改进方法，大家可以在评论区留言，记得点个免费的赞吧。
源码可到github下载，上级文件夹有style-components的相同实现：
本文含有隐藏内容，请 开通VIP 后查看