效果显示

 一、建立html结构

1. 样式表用于导入相关样式

2.骨架结构为Card->(front,back)，用于分别表示正面、背面

3.最后引入js来控制事件。为什么不直接在css里设置伪类来控制动画呢？看之后解释。

    
欢迎进入我的世界
点赞
关注
收藏
找到我

二、书写相关样式

需要解决的问题：

        如何让卡片的两个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的相同实现：

github链接

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！