卡片翻转效果
创作时间:
作者:
@小白创作中心
卡片翻转效果
引用
CSDN
1.
https://blog.csdn.net/m0_65029152/article/details/140498252
本文将详细介绍如何使用HTML和CSS实现一个卡片翻转效果。当鼠标移入某个盒子时，盒子会翻转并显示其背面的内容。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡片翻转效果</title>
<style>
* {
/* 清除默认样式 */
margin: 0;
padding: 0;
}
body {
/* 定义变量 */
--img-width: 200px;
--img-height: 270px;
}
.container {
/* 设为flex容器 */
display: flex;
/* 设置子元素水平居中 */
justify-content: center;
/* 设置子元素垂直居中 */
align-items: center;
/* 设置容器宽高为整个可视区的宽高 */
width: 100vw;
height: 100vh;
background-color: #eeffff;
}
.grid-container {
position: relative;
/* 设为grid容器 */
display: grid;
/* 设置为4列，列宽为200px（图片宽度） */
grid-template-columns: repeat(4, var(--img-width));
/* 设为两行，行高为270px（图片高度） */
grid-template-rows: repeat(2, var(--img-height));
/* 设置行列间距为20px */
gap: 20px;
/* 设置观测距离 Z=0 平面*/
perspective: 1600px;
/* 设置观测位置 */
perspective-origin: 50% 50%;
}
.grid-item {
/* 设为相对定位 */
position: relative;
/* 设置过度时间 */
transition: 2s;
/* 应用3D转换 */
transform-style: preserve-3d;
}
.grid-item:hover {
/* 沿Y轴旋转180° */
transform: rotateY(180deg);
}
.img-front,
.img-back {
/* 设为绝对定位 */
position: absolute;
/* 距离父元素上边距和左边距均为0 */
top: 0;
left: 0;
/* 图片的默认大小（父盒子的宽高） */
width: 100%;
height: 100%;
border-radius: 6px;
box-shadow: 0 0 6px 1px #666;
/* 设置图片背面不可见 */
backface-visibility: hidden;
}
.img-front {
/* 提高堆叠顺序 */
z-index: 2;
}
.img-back {
/* 卡片反面图默认背面朝向观察者 */
transform: rotateY(-180deg);
}
</style>
</head>
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-1.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_1.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-2.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_2.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-3.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_3.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-4.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_4.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-5.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_5.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-6.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_6.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-7.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_7.jpg" alt="">、
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-8.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_8.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
实现过程
1. 页面结构
（1）结构分析
根据上述效果图，可知：
- 页面中有一个大容器，在其父容器中水平垂直居中；
- 容器中排列了两行四列，总共8个卡片；
- 每个卡片有正面和反面两张图片；
（2）结构代码
- 页面中准备一个父盒子【.container】，其中添加一个Grid布局容器【.grid-container】和8个Grid元素【.grid-item】；
- 每个Grid元素中添加两个img元素【.img-front】、【.img-back】，作为卡片前、后的两张图片；
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-1.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_1.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-2.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_2.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-3.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_3.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-4.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_4.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-5.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_5.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-6.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_6.jpg" alt="">
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-7.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_7.jpg" alt="">、
</div>
<div class="grid-item">
<img class="img-front" src="D:\\test\\zyl-img\\img-v-8.jpg" alt="">
<img class="img-back" src="D:\\test\\zyl-img\\emoji_8.jpg" alt="">
</div>
</div>
</div>
</body>
注意，这里需要准备16张图片，当然也可先设置背景色代替；
2. 初始样式
（1）样式分析
根据上述效果图，可知：
- Grid容器中的8个Grid元素，呈现【2行4列】的排列方式；
- Grid容器的父盒子使用Flex布局，使得Grid容器在页面中水平垂直居中显示；
- Grid元素中的卡片正、反面图片，使用绝对定位，使其先重叠在一起；
- 需要提高正面元素的堆叠顺序，否则看到的是背面元素；
（2）样式代码
<style>
*{
/* 清除默认样式 */
margin: 0;
padding: 0;
}
.container{
/* 设为flex容器 */
display: flex;
/* 设置子元素水平居中 */
justify-content: center;
/* 设置子元素垂直居中 */
align-items: center;
/* 设置容器宽高为整个可视区的宽高 */
width: 100vw;
height: 100vh;
}
.grid-container{
position: relative;
/* 设为grid容器 */
display: grid;
/* 设置为4列，列宽为200px（图片宽度） */
grid-template-columns: 200px 200px 200px 200px;
/* 设为两行，行高为270px（图片高度） */
grid-template-rows: 270px 270px;
/* 设置行列间距为20px */
gap: 20px;
}
.grid-item{
/* 设为相对定位 */
position: relative;
}
.img-front, .img-back{
/* 设为绝对定位 */
position: absolute;
/* 距离父元素上边距和左边距均为0 */
top: 0;
left: 0;
/* 图片的默认大小（父盒子的宽高） */
width: 100%;
height: 100%;
}
.img-front{
/* 提高堆叠顺序 */
z-index: 2;
}
</style>
3. 翻转效果
（1）需求分析
分析需求，可知：
- Grid元素在鼠标经过时进行旋转，沿Y轴旋转180°，Grid元素中的卡片正反面图片交换显示；
- Grid元素应用3D旋转效果，并设置过度时间；
- 设置卡片正反面两张图片的背面不可见（在3D旋转中元素的背面默认是可见的，是正面的镜像）；
- 卡片反面的图片需要将其默认旋转180°，否则将会不可见；
注意：
- 图片元素默认都是正面朝向观察者的，设置背面不可见之后，Grid元素在旋转时，卡片正反面的两张图片都将是【背面朝向观察者】，两张图片都将不可见；
- 所以这里需要将卡片反面的这张图【.img-back】，沿Y轴做180°旋转；这样一来，这张图片将会默认背面朝向观察者（不可见），Grid元素旋转后，刚好它的正面就朝向观察者了（可见）；
- 卡片正面的图片【.img-front】，不需要进行设置，它默认初始就是正面朝向观察者（可见），Grid元素在旋转时，它将背面朝向观察者（不可见）；
（2）实现代码
.grid-item{
/* 设置过度时间 */
transition: 2s;
/* 应用3D转换 */
transform-style: preserve-3d;
}
.grid-item:hover{
/* 沿Y轴旋转180° */
transform: rotateY(180deg);
}
.img-front, .img-back{
/* 设置图片背面不可见 */
backface-visibility: hidden;
}
.img-back{
/* 卡片反面图默认背面朝向观察者 */
transform: rotateY(-180deg);
}
4. 图片大小问题
本例中展示的图片大小为 200px270px，对应的Grid元素也为 200px270px；
如果采用的图片比例不相同，则会被压缩或拉伸，导致变形；
这里给出一种解决方式，采用CSS中的变量进行统一传值：
- 在body标签中定义变量；
- 在Grid容器中引用变量；
这样一来，如果图片是别的尺寸，定义变量时就可以直接更改变量值了，其余地方不用改；
body{
/* 定义变量 */
--img-width:200px;
--img-height:270px;
}
.grid-container {
/* 设置为4列，列宽为200px（图片宽度） */
grid-template-columns: var(--img-width) var(--img-width) var(--img-width) var(--img-width);
/* 设为两行，行高为270px（图片高度） */
grid-template-rows: var(--img-height) var(--img-height);
}
本文原文来自CSDN
热门推荐
未婚同居与已婚同居的区别
“云”字的多重含义及其在生活中的应用
社保断交的影响与应对策略
春分养生正当时，中医八法护安康
身体黑色素痣越来越多是什么原因引起的
期货套利交易的方法有哪些？期货套利交易存在哪些风险？
清代贝勒爷的地位有多高？
经济性裁员的流程是什么
阿根廷签证申请指南：快速办理电子签证和旅游签证的完整流程
肽类药物：现状、进展与未来展望
发动机启停系统的结构组成及工作原理
如何利用期权实现有效的套期保值？这种保值策略有哪些风险？
健身吃全麦面包和普通面包的区别
《巫师3 狂猎》通关心得感受 探索游戏世界的深度与细腻
无缝管在各行各业的广泛应用
漫步山水间，探寻千年韵：上海松江一日深度文化之旅
捕捉自然的灵魂：风光摄影技巧的探索之旅
2025重庆在建轨道交通线路汇总
调解员是什么？详解调解员的职责与作用
预防吸毒复吸：从个人到社会的全面防护体系
CuNi44铜镍合金泊松比是多少？性能与应用深度解析
事业单位养老金怎样计算
2025男足世预赛亚洲区晋级规则解析 中国男足的挑战与希望
洗车如何洗又快又干净
皮带调整轮应怎样进行调整操作？调整皮带调整轮时要注意什么？
恒河豚对抗污染和栖息地丧失
中国的10座大坝，你知道大坝吗？
材料的9种力学性能衡量指标和测量方法
购房定金合同有法律效力吗？
激光切割机的性能参数与选型指南