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: var(--img-width) var(--img-width) var(--img-width) var(--img-width);
            /* 设为两行，行高为270px（图片高度） */
            grid-template-rows: var(--img-height) var(--img-height);
            /* 设置行列间距为20px */
            grid-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 */
        grid-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);
    ......
}

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

每天进步一点点~！

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【STM32 IDE】使用STM32CubeIDE创建一个工程

【STM32 IDE】使用STM32CubeIDE创建一个工程

关于IDE的下载安装和环境配置这里暂且不介绍&#xff0c;我们直接使用STM32F407ZGT6创建工程。 这里需要注意两点&#xff1a; 创建工程时&#xff0c;默认使用最新版本的固件包&#xff08;HAL库&#xff09;&#xff0c;好像还不让更改。如果本地电脑位置没有该版本的包&…
阅读更多...
webpack优化

webpack优化

优化方向 热更新 概念 /** hmr: hot module replacement 热模块替换 / 模块热更新作用&#xff1a; 一个模块发生改变&#xff0c;只会重新打包这一个模块&#xff08;而不是打包所有模块&#xff09;&#xff0c;极大的提升了构建速度样式文件&#xff1a; 可以使用hmr功能…
阅读更多...
防火墙-NAT策略和智能选路

防火墙-NAT策略和智能选路

一、背景技术 在日常网络环境&#xff0c;内部网络想要访问外网无法直接进行通信&#xff0c;这时候就需要进行NAT地址转换&#xff0c;而在防火墙上配置NAT和路由器上有点小区别&#xff0c;思路基本一致&#xff0c;这次主要就以防火防火墙配置NAT策略为例&#xff0c;防火墙…
阅读更多...
【学习css3】使用flex和grid实现等高元素布局

【学习css3】使用flex和grid实现等高元素布局

过往的实现方法是使用浮动加计算布局来实现&#xff0c;当flex和grid问世时&#xff0c;这一切将变得简单起来 一、简单的两列实现 1、先看页面效果 2、css代码 .container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 2…
阅读更多...
git clone 报错 Unable to negotiate

git clone 报错 Unable to negotiate

Unable to negotiate with 192.168.110.10 port 39418: no matching cipher found. Their offer: aes128-cbc,3des-cbc,blowfish-cbc,aes192-cbc,aes256-cbc fatal: Could not read from remote repository. 查询支持哪些加密算法 ssh -Q cipher 修改文件 /etc/ssh/ssh_config…
阅读更多...
AR0132AT 1/3 英寸 CMOS 数字图像传感器（AR0132AT6R、AR0132AT6C）适用于监控和高清视频等多种应用

AR0132AT 1/3 英寸 CMOS 数字图像传感器（AR0132AT6R、AR0132AT6C）适用于监控和高清视频等多种应用

AR0132AT 1/3 英寸 CMOS 数字图像传感器&#xff0c;带 1280H x 960V 有效像素阵列。它能在线性或高动态模式下捕捉图像&#xff0c;且带有卷帘快门读取。它包含了多种复杂的摄像功能&#xff0c;如自动曝光控制、开窗&#xff0c;以及视频和单帧模式。它适用于低光度和高动态范…
阅读更多...
基于AT89C51单片机构造波形发生器设计（含文档、源码与proteus仿真，以及系统详细介绍）

基于AT89C51单片机构造波形发生器设计（含文档、源码与proteus仿真，以及系统详细介绍）

本篇文章论述的是基于AT89C51单片机构造波形发生器设计的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 摘要 仿真图 总体结构框图 仿真程序效果图 原理图 代码 系统论文&#xff08;部分&…
阅读更多...
Qcom平台通过Hexagon IDE 测试程序性能指导

Qcom平台通过Hexagon IDE 测试程序性能指导

Qcom平台通过Hexagon IDE 测试程序性能指导 1 安装Hexagon IDE工具2 测试工程2.1 打开Hexagon IDE2.2 新建工程2.3 添加测试案例2.3.1 方法一&#xff1a;新建2.3.2 方法二&#xff1a;拷贝 2.4 配置测试环境2.4.1 包含头文件2.4.2 添加程序优化功能(需先bulid一下)2.4.3 添加g…
阅读更多...
【14】Github Copilot环境搭建

【14】Github Copilot环境搭建

环境搭建 这里以Visual Studio Code为例&#xff0c;安装好vs code&#xff0c;打开扩展侧边菜单栏&#xff0c;搜索“Github Copilot”&#xff0c;会出现如下图的两个插件&#xff0c;点击安装第一个&#xff0c;另一个会附带一起安装&#xff0c;然后弹出提示重新启动vs co…
阅读更多...
阿里云CDN- https（设计支付宝春节开奖业务）

阿里云CDN- https（设计支付宝春节开奖业务）

HTTP相关概念 1. HTTP概述 http是最广泛的网络协议&#xff0c;是客户端与服务器之间的请求与应答的标准&#xff08;TCP&#xff09;&#xff0c;用于www服务器传输超文本到本地浏览器的传输协议&#xff0c;使浏览器更加高效&#xff0c;网络传输减少。 2.HTTPS概述 http…
阅读更多...
OpenHarmony移植之编译工具链

OpenHarmony移植之编译工具链

OpenHarmony移植之编译工具链 1、下载工具链 选择适合自己芯片的arm编译工具链&#xff0c;因为我的是arm cortex-a9的芯片&#xff0c;所以我选择如下交叉工具链 Downloads | GNU-A Downloads – Arm DeveloperDownload the The GNU Toolchain for the Cortex-A Family are…
阅读更多...
稀疏3D检测-Sparse4Dv1v2v3

稀疏3D检测-Sparse4Dv1v2v3

0. Multi-view 3D detection LSS(Lift-Splat-Shoot)利用深度估计将图像特征提升到3D空间&#xff0c;并将特征拍到BEV平面。后续工作将lift-splats操作应用于3D检测领域。 Bevformer将时序信息以BEV特征cat一起引入时序信息。 DETR3D中通过预测的3D点投影到图像平面后获取图像…
阅读更多...
HTTPS请求头缺少HttpOnly和Secure属性解决方案

HTTPS请求头缺少HttpOnly和Secure属性解决方案

问题描述&#xff1a; 建立Filter拦截器类 package com.ruoyi.framework.security.filter;import com.ruoyi.common.core.domain.model.LoginUser; import com.ruoyi.common.utils.SecurityUtils; import com.ruoyi.common.utils.StringUtils; import com.ruoyi.framework.…
阅读更多...
vue仿甘特图开发工程施工进度表

vue仿甘特图开发工程施工进度表

前言 本文是根据项目实际开发中一个需求开发的demo&#xff0c;仅用了elementUI&#xff0c;可当作独立组件使用&#xff0c;C V即用。 当然没考虑其他的扩展性和一些数据的校验&#xff0c;主要是提供一个处理思路&#xff0c;有需要的小伙伴可以直接复制&#xff1b;本demo的…
阅读更多...
厂家置换电费如何达到最大化收益

厂家置换电费如何达到最大化收益

新能源行业知识体系-------主目录-----持续更新https://blog.csdn.net/grd_java/article/details/140004020 文章目录 一、电能电费二、同时刻不同厂家置换&#xff0c;不会影响最终电能电费结果三、风险防范补偿和回收机制四、我们的数据如何考虑补偿和回收五、如何利用补偿和…
阅读更多...
K8S私有云裸金属服务器负载均衡器OpenELB——筑梦之路

K8S私有云裸金属服务器负载均衡器OpenELB——筑梦之路

OpenELB介绍 OpenELB 是一个专为裸机 Kubernetes 集群设计的开源负载均衡器实现。 在云服务环境中的 Kubernetes 集群里&#xff0c;通常可以用云服务提供商提供的负载均衡服务来暴露 Service&#xff0c;但是在本地没办法这样操作。而 OpenELB 可以让用户在裸金属服务器、边缘…
阅读更多...
二叉树问题，两种解决方法（1遍历 2直接定义名字功能递归

二叉树问题，两种解决方法（1遍历 2直接定义名字功能递归

1第一种方法就是另写一个traverse方法&#xff0c;2第二种方法就是把函数名当成已经实现的功能&#xff0c;直接写 1、翻转二叉树 class Solution {public TreeNode invertTree(TreeNode root) {if(rootnull) return null;TreeNode leftinvertTree(root.left);TreeNode righti…
阅读更多...
Facebook：数字时代的社交瑰宝

Facebook：数字时代的社交瑰宝

在当今数字化飞速发展的时代&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分&#xff0c;而Facebook作为其中的领军者&#xff0c;不仅连接了全球数十亿的用户&#xff0c;更深刻地改变了人们的社交方式和生活方式。本文将探讨Facebook如何成为数字时代的社交瑰宝…
阅读更多...
【排序算法】1.冒泡排序-C语言实现

【排序算法】1.冒泡排序-C语言实现

冒泡排序&#xff08;Bubble Sort&#xff09;是最简单和最通用的排序方法&#xff0c;其基本思想是&#xff1a;在待排序的一组数中&#xff0c;将相邻的两个数进行比较&#xff0c;若前面的数比后面的数大就交换两数&#xff0c;否则不交换&#xff1b;如此下去&#xff0c;直…
阅读更多...
SimMIM：一个类BERT的计算机视觉的预训练框架

SimMIM：一个类BERT的计算机视觉的预训练框架

1、前言 呃…好久没有写博客了&#xff0c;主要是最近时间比较少。今天来做一期视频博客的内容。本文主要讲SimMIM&#xff0c;它是一个将计算机视觉&#xff08;图像&#xff09;进行自监督训练的框架。 原论文&#xff1a;SimMIM&#xff1a;用于掩码图像建模的简单框架 (a…
阅读更多...
最新文章

Copyright @ 2022~2023