Web开发:卡片翻转效果(HTML、CSS)

news2024/11/10 14:32:55

目录

一、实现效果

二、完整代码

三、实现过程

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.coloradmin.cn/o/1931032.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【HarmonyOS】HarmonyOS NEXT学习日记:二、ArkTs语法

【HarmonyOS】HarmonyOS NEXT学习日记&#xff1a;二、ArkTs语法 众所周知TS是JS的超集,而ArkTs则可以理解为是Ts的超集。他们的基础都基于JS&#xff0c;所以学习之前最好就JS基础。我的学习重点也是放在ArkTs和JS的不同点上。 文章主要跟着官方文档学习&#xff0c;跳过了一…

Golang | Leetcode Golang题解之第234题回文链表

题目&#xff1a; 题解&#xff1a; func reverseList(head *ListNode) *ListNode {var prev, cur *ListNode nil, headfor cur ! nil {nextTmp : cur.Nextcur.Next prevprev curcur nextTmp}return prev }func endOfFirstHalf(head *ListNode) *ListNode {fast : headslo…

多媒体软件开发选择Animate软件还是Unity3D软件?

以下内容可能有一些片面&#xff0c;因为多媒体软件开发平台有很多&#xff0c;因为接触Animate和Unity3D比较多&#xff0c;所以这里仅对这两款进行分析&#xff01; Animate软件与Unity3D软件都是经常在多媒体展馆中用来制作互动展示内容的&#xff0c;对于这两种开发平台&a…

用AI生成Springboot单元测试代码太香了

你好&#xff0c;我是柳岸花开。 在当今软件开发过程中&#xff0c;单元测试已经成为保证代码质量的重要环节。然而&#xff0c;编写单元测试代码却常常让开发者头疼。幸运的是&#xff0c;随着AI技术的发展&#xff0c;我们可以利用AI工具来自动生成单元测试代码&#xff0c;极…

【系统架构设计师】十一、系统架构设计(中间件|典型应用架构)

目录 九、中间件 9.1 基础概念 9.2 中间件分类 十、典型应用架构 10.1 J2EE和四层结构 10.2 JSPServletJavaBeanDAO 10.3 .NET和J2EE之争 往期推荐 历年真题练习 九、中间件 之前总提到中间件&#xff0c;那么中间件到底是什么&#xff1f;在系统架构中又扮演者什么角…

摸鱼大数据——Kafka——kafka tools工具使用

可以在可视化的工具通过点击来操作kafka完成主题的创建&#xff0c;分区等操作 注意: 安装完后桌面不会有快捷方式,需要去电脑上搜索,或者去自己选的安装位置找到发送快捷方式到桌面! 连接配置 创建主题 删除主题 主题下的数据查看 数据显示问题说明 修改工具的数据显示类型 发…

【C++】vector的认识与使用

vector的认识与使用 认识vectorvector的使用Member functions&#xff08;成员函数&#xff09;构造函数(constructor)析构函数(destructor)赋值构造函数(operator) Iterators&#xff08;迭代器&#xff09;beginendrbeginrend Capacity&#xff08;容量&#xff09;sizemax_s…

zephyr设置BLE广播数据实例

目录 实例1&#xff1a;静态开启广播数据实例2&#xff1a;动态更改广播数据实例3&#xff1a;创建可连接的广播 实例1&#xff1a;静态开启广播数据 新建一个hello world的工程模板。 在prj.conf中开启蓝牙 CONFIG_BTy这个宏&#xff0c;默认会开启广播支持 ( BT_BROADCAS…

1448.统计二叉树中的好节点数目

给你一棵根为 root 的二叉树&#xff0c;请你返回二叉树中好节点的数目。 「好节点」 X 定义为&#xff1a;从根到该节点 X 所经过的节点中&#xff0c;没有任何节点的值大于 X 的值。 示例 1&#xff1a; 输入&#xff1a;root [3,1,4,3,null,1,5] 输出&#xff1a;4 解释&am…

【算法】LRU缓存

难度&#xff1a;中等 题目&#xff1a; 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;…

【人工智能新纪元】机器学习算法:探索智能背后的奥秘与常见利器

在这个日新月异的科技时代&#xff0c;人工智能&#xff08;AI&#xff09;如同一股不可阻挡的洪流&#xff0c;正深刻地改变着我们的世界。作为AI领域的核心驱动力之一&#xff0c;机器学习算法以其独特的魅力&#xff0c;引领着智能技术的飞速发展。今天&#xff0c;就让我们…

【学习】美国虚拟信用卡申请流程

WildCard 官方网址&#xff1a;https://bewildcard.com/i/PEACEFUL &#xff08;使用邀请码“PEACEFUL”可以享受开卡88 折优惠&#xff0c;注册时提示填写邀请码就可以填写&#xff09;

Vue3 组件向下通信 祖孙组件的通信 provide与inject

介绍 当父子间通信可以使用props&#xff0c;祖孙使用provide&#xff08;传递&#xff09;或inject&#xff08;接收&#xff09;&#xff0c; 这时不管组件套的多深都可以向下传递。 例子 现在有一个需求&#xff0c;把App.vue的数据传递到MusciPlay.vue里。 App.vue …

跟李沐学AI:模型选择、过拟合和欠拟合

目录 训练误差和泛化误差 验证数据集和测试数据集 K-则交叉验证 模型总结 过拟合和欠拟合 模型容量 模型容量的影响 估计模型容量 数据复杂度 拟合总结 训练误差和泛化误差 训练误差&#xff1a;模型在训练数据上的误差 泛化误差&#xff1a;模型在新数据上的误差 …

移掉 K 位数字

题目链接 移掉 K 位数字 题目描述 注意点 1 < k < num.length < 10^5num 仅由若干位数字&#xff08;0 - 9&#xff09;组成除了 0 本身之外&#xff0c;num 不含任何前导零 解答思路 关键是怎样移掉K位数字保证移除后的数字是最小的。观察规律可得&#xff0c;为…

基于LSTM及其变体的回归预测

1 所用模型 代码中用到了以下模型&#xff1a; 1. LSTM&#xff08;Long Short-Term Memory&#xff09;&#xff1a;长短时记忆网络&#xff0c;是一种特殊的RNN&#xff08;循环神经网络&#xff09;&#xff0c;能够解决传统RNN在处理长序列时出现的梯度消失或爆炸的问题。L…

GB35114国密算法-GMSSL

C有个三方库-GMSSL是可以进行GB35114所需要的SM2、SM3、SM4等加解密算法的&#xff0c;但是使用国密算法是需要申请报备的 GmSSL是由北京大学自主开发的国产商用密码开源库&#xff0c;实现了对国密算法、标准和安全通信协议的全面功能覆盖&#xff0c;支持包括移动端在内的主流…

SpringBoot整合Swagger报错:Failed to start bean ‘documentationPluginsBootstrapper

文章目录 1 问题背景2 问题原因3 修改SpringBoot配置文件 application.properties参考 1 问题背景 Swagger是SpringBoot中常用的API文档工具&#xff0c;在刚接触使用的时候&#xff0c;按照通用的代码进行配置&#xff0c;发现报错了 [main] ERROR org.springframework.boot…

【ARM AMBA AXI 入门 5.1 - QoS是什么?QoS是怎么工作的? 】

请阅读【ARM AMBA AXI 总线 文章专栏导读】 转自&#xff1a;揭秘数通知识&#xff1a;QoS是什么&#xff1f;QoS是怎么工作的&#xff1f;&#xff08;一&#xff09; 文章目录 QoS 概述综合服务和差分服务 QoS 工具报文分类报文标记流量监管和整形工具拥塞管理工具拥塞避免工…

JuiceFS缓存特性

缓存 对于一个由对象存储和数据库组合驱动的文件系统&#xff0c;缓存是本地客户端与远端服务之间高效交互的重要纽带。读写的数据可以提前或者异步载入缓存&#xff0c;再由客户端在后台与远端服务交互执行异步上传或预取数据。相比直接与远端服务交互&#xff0c;采用缓存技…