Web开发：卡片翻转效果（HTML、CSS）

目录

一、实现效果

二、完整代码

三、实现过程

1、页面结构

2、初始样式

3、翻转效果

4、图片大小问题

一、实现效果

如下图所示，当鼠标移入某个盒子，就反转这个盒子，并显示其背面的内容——卡片翻转效果；

卡片翻转效果

二、完整代码

【test.html】

<!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、图片大小问题

本例中展示的图片大小为 200px*270px，对应的Grid元素也为 200px*270px；

如果采用的图片比例不相同，则会被压缩或拉伸，导致变形；

这里给出一种解决方式，采用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);......
}

=========================================================================

每天进步一点点~！

记录一下这个有意思的东东~~！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/378768.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java二十三种设计模式-工厂方法模式（2/23）

Java二十三种设计模式-工厂方法模式（2/23）

工厂方法模式&#xff1a;设计模式中的瑞士军刀 引言 在软件开发中&#xff0c;工厂方法模式是一种常用的创建型设计模式&#xff0c;它用于处理对象的创建&#xff0c;将对象的实例化推迟到子类中进行。这种模式不仅简化了对象的创建过程&#xff0c;还提高了代码的可维护性…
阅读更多...
基于Vue CLI 3构建Vue3项目（Vue2也可参考）

基于Vue CLI 3构建Vue3项目（Vue2也可参考）

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…
阅读更多...
Android Framework学习笔记（4）----Zygote进程

Android Framework学习笔记（4）----Zygote进程

Zygote的启动流程 Init进程启动后&#xff0c;会加载并执行init.rc文件。该.rc文件中&#xff0c;就包含启动Zygote进程的Action。详见“RC文件解析”章节。 根据Zygote对应的RC文件&#xff0c;可知Zygote进程是由/system/bin/app_process程序来创建的。 app_process大致处…
阅读更多...
【Java--数据结构】二叉树oj题（上）

【Java--数据结构】二叉树oj题（上）

前言 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 判断是否是相同的树 oj链接 要判断树是否一样&#xff0c;要满足3个条件 根的 结构 和 值 一样左子树的结构和值一样右子树的结构和值一样 所以就可以总结以下思路…
阅读更多...
【Pytorch】RNN for Name Classification

【Pytorch】RNN for Name Classification

参考学习来自&#xff1a; https://pytorch.org/tutorials/intermediate/char_rnn_classification_tutorial.htmlRNN完成姓名分类https://download.pytorch.org/tutorial/data.zip 导入库 import glob # 用于查找符合规则的文件名 import os import unicodedata import stri…
阅读更多...
【Powershell】超越限制：获取Azure AD登录日志

【Powershell】超越限制：获取Azure AD登录日志

你是否正在寻找一种方法来追踪 Azure Active Directory&#xff08;Azure AD&#xff09;中用户的登录活动&#xff1f; 如果是的话&#xff0c;查看Azure AD用户登录日志最简单的方法是使用Microsoft Entra管理中心。打开 https://entra.microsoft.com/&#xff0c;然后进入 监…
阅读更多...
taro小程序terser-webpack-plugin插件不生效(vue2版本)

taro小程序terser-webpack-plugin插件不生效(vue2版本)

背景 最近在做公司内部的小程序脚手架&#xff0c;为了兼容老项目和旧项目&#xff0c;做了vue2taro,vue3taro两个模板&#xff0c;发现terser-webpack-plugin在vue2和vue3中的使用方式并不相同&#xff0c;同样的配置在vue3webpack5中生效&#xff0c;但是在vue2webpack4中就…
阅读更多...
学习Python的IDE功能--（一）入门导览

学习Python的IDE功能--（一）入门导览

项目视图是主要工具窗口之一。它包含项目目录、SDK 特定的外部库和临时文件。点击带条纹的按钮可以预览演示项目。您也可以按Alt1打开。点击以打开项目视图&#xff0c;展开项目目录以查看项目文件。双击以打开welcome.py。 切换到"学习"工具窗口继续学习本课次。…
阅读更多...
ELK企业级日志分析

ELK企业级日志分析

目 录 一、ELK简介 1.1 elasticsearch简介 1.2 logstash简介 1.3 kibana简介 1.4 ELK的好处 1.5 ELK的工作原理 二、部署ELK 2.1 部署elasticsearch(集群) 2.1.1 修改配置文件 2.1.2 修改系统参数 2.1.2.1 修改systemmd服务管理器 2.1.2.2 性能调优参数 2.1.2.3 …
阅读更多...
文献阅读：tidyomics 生态系统：增强组学数据分析

文献阅读：tidyomics 生态系统：增强组学数据分析

文献介绍 文献题目&#xff1a; The tidyomics ecosystem: enhancing omic data analyses 研究团队&#xff1a; Stefano Mangiola&#xff08;澳大利亚沃尔特和伊丽莎霍尔医学研究所&#xff09;、Michael I. Love&#xff08;美国北卡罗来纳大学教堂山分校&#xff09;、Ant…
阅读更多...
k8s集群新增节点

k8s集群新增节点

目前集群状态 如K8S 集群搭建中规划的集群一样 Masternode01node02IP192.168.100.100192.168.100.101192.168.100.102OSCent OS 7.9Cent OS 7.9Cent OS 7.9 目前打算新增节点node03 Masternode01node02node03IP192.168.100.100192.168.100.101192.168.100.102192.168.100.1…
阅读更多...
Golang | Leetcode Golang题解之第240题搜索二维矩阵II

Golang | Leetcode Golang题解之第240题搜索二维矩阵II

题目&#xff1a; 题解&#xff1a; func searchMatrix(matrix [][]int, target int) bool {m, n : len(matrix), len(matrix[0])x, y : 0, n-1for x < m && y > 0 {if matrix[x][y] target {return true}if matrix[x][y] > target {y--} else {x}}return f…
阅读更多...
STM32 GPIO的工作原理

STM32 GPIO的工作原理

STM32的GPIO管脚有下面8种可能的配置:&#xff08;4输入 2 输出 2 复用输出) &#xff08;1&#xff09;浮空输入_IN_FLOATING 在上图上&#xff0c;阴影的部分处于不工作状态&#xff0c;尤其是下半部分的输出电路&#xff0c;实际上是与端口处于隔离状态。黄色的高亮部分显示…
阅读更多...
C#统一委托Func与Action

C#统一委托Func与Action

C#在System命名空间下提供两个委托Action和Func&#xff0c;这两个委托最多提供16个参数&#xff0c;基本上可以满足所有自定义事件所需的委托类型。几乎所有的 事件 都可以使用这两个内置的委托Action和Func进行处理。 Action委托&#xff1a; Action定义提供0~16个参数&…
阅读更多...
stm32入门-----初识stm32

stm32入门-----初识stm32

目录 前言 ARM stm32 1.stm32家族 2.stm32的外设资源 3.命名规则 4.系统结构 5.引脚定义 6.启动配置 7.STM32F103C8T6芯片 8.STM32F103C8T6芯片原理图与最小系统电路 前言 已经很久没跟新了&#xff0c;上次发文的时候是好几个月之前了&#xff0c;现在我是想去学习st…
阅读更多...
怎样减少视频的容量 怎样减少视频内存保持清晰度

怎样减少视频的容量 怎样减少视频内存保持清晰度

在数字媒体时代&#xff0c;视频内容已经成为人们日常交流和信息传递的重要方式。然而&#xff0c;视频往往占用大量存储空间&#xff0c;给我们的设备带来不小的负担。如何在不损失视频质量的前提下&#xff0c;减少视频文件的大小呢&#xff1f;本文将为你揭秘几个实用的技巧…
阅读更多...
定制开发AI智能名片商城微信小程序在私域流量池构建中的应用与策略

定制开发AI智能名片商城微信小程序在私域流量池构建中的应用与策略

摘要 在数字经济蓬勃发展的今天&#xff0c;私域流量已成为企业竞争的新战场。定制开发AI智能名片商城微信小程序&#xff0c;作为私域流量池构建的创新工具&#xff0c;正以其独特的优势助力企业实现用户资源的深度挖掘与高效转化。本文深入探讨了定制开发AI智能名片商城微信…
阅读更多...
数据结构(5.2_2)——二叉树的性质

数据结构(5.2_2)——二叉树的性质

常见考点1: 设非空二叉树中度为0、1和2的结点个数分别为n0、n1和n2&#xff0c;则n0n21(叶子结点比二分支结点多一个) 常见考点2&#xff1a; 二叉树第一层至多右 有个结点(i>1) m叉树第一层至多右 有个结点(i>1) 常见考点3&#xff1a; 高度为h的二叉树至多有个结点…
阅读更多...
23年oppo提前批笔试真题-构造二阶行列式

23年oppo提前批笔试真题-构造二阶行列式

构造二阶行列式 题目描述 小欧希望你构造一个二阶行列式&#xff0c;满足行列式中每个数均为不超过 20 的正整数&#xff0c;且行列式的值恰好等于x。你能帮帮她吗? 输入描述 一个正整数x。-1000 < x < 1000 输出描述 如果无解&#xff0c;请输出-1。否则输出任意合…
阅读更多...
ELK日志管理与应用

ELK日志管理与应用

目录 一.ELK收集nginx日志 二.收集tomcat日志 三.Filebeat 一.ELK收集nginx日志 1.搭建好ELKlogstashkibana架构 2.关闭防火墙和selinux systemctl stop firewalld setenforce 0 3.安装nginx [rootlocalhost ~]# yum install epel-release.noarch -y [rootlocalhost …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发