当前位置: 首页 > news >正文

css卡片翻转 父元素翻转子元素不翻转效果

css卡片翻转 父元素翻转子元素不翻转效果

vue
<div class="moduleBox"><div class="headTitle"><span class="headName">大额案例</span></div><div class="moduleItem"><span class="moduleNum">--</span><span class="moduleLabel">待处理</span></div><div class="moduleItem"><span class="moduleNum">--</span><span class="moduleLabel">待审核</span></div><div class="moduleItem"><span class="moduleNum">--</span><span class="moduleLabel">待审批</span></div></div>
scss
.moduleBox{display:flex;justify-content:space-evenly;align-items:center;width:30%;height:320px;background:#ccdbfe;margin:22px 1.6%;border-radius:6px;position: relative; perspective: 1000px; /* 设置透视 */transform: translateZ(0); /* 开启硬件加速 */.headTitle{width: 200px;     border-bottom: 43px solid transparent;                  border-top: 43px solid #4c7efd;  border-left: 13px solid transparent;          border-right: 13px solid transparent;position:absolute;top:0;left:calc(50% - 113px);.headName{width:100%;text-align:center;font:18px/40px '';position:absolute;top:-40px;color:#fff;}}.moduleItem{width:26%;height:90px;background:#c1d2fd;border-radius:3px;display:flex;justify-content:center;align-items:center;flex-direction:column;transition: 0.4s ease-in-out;color:#4d7EFD;cursor:pointer;.moduleNum{font:28px/34px '';transition: 0.4 0.6;}.moduleLabel{font:14px/20px '';transition: 0.4 0.6;}}.moduleItem:hover{background:#4c7efd;color:#fff;transform: rotateX(180deg);.moduleNum{transform: rotateX(-180deg);}.moduleLabel{transform: rotateX(-180deg);}}
}

在这里插入图片描述

相关文章:

css卡片翻转 父元素翻转子元素不翻转效果

css卡片翻转 父元素翻转子元素不翻转效果 vue <div class"moduleBox"><div class"headTitle"><span class"headName">大额案例</span></div><div class"moduleItem"><span class"module…...

解决文件传输难题:如何绕过Gitee的100MB上传限制

引言 在版本控制和代码托管领域&#xff0c;Gitee作为一个流行的平台&#xff0c;为用户提供了便捷的服务。然而&#xff0c;其对单个文件大小设定的100MB限制有时会造成一些不便。 使用云存储服务 推荐理由&#xff1a; 便捷性&#xff1a;多数云存储服务如&#xff1a; Dro…...

零基础学Java第二十三天之网络编程Ⅱ

1. InetAddress类 用来表示主机的信息 练习&#xff1a; C:\Windows\system32\drivers\etc\ hosts 一个主机可以放多个个人网站 www.baidu.com/14.215.177.37 www.baidu.com/14.215.177.38 www.taobao.com/183.61.241.252 www.taobao.com/121.14.89.253 2. Socket 3.…...

【HarmonyOS尝鲜课】- 前言

面向人群 本课程适用于HarmonyOS应用开发的初学者。 有无经验的开发者都可以轻松掌握ArkTS语言声明式开发范式&#xff0c;体验更简洁、更友好的HarmonyOS应用开发旅程。 什么是HarmonyOS HarmonyOS&#xff08;鸿蒙操作系统&#xff09;是由华为技术有限公司开发的全场景分…...

phpstudy配置网站伪静态

apache的伪静态写法&#xff1a; RewriteEngine On RewriteCond % {REQUEST_FILENAME} !-f RewriteCond % (REQUEST_FILENAME) !-d RewriteRule ^(.*)$ indexp?/$1 [QSA, PT,L] nginx写法&#xff1a; location / { index index.html index.php; #autoindex on; if(!…...

浅谈traceroute网络诊断工具

traceroute 是一个网络诊断工具&#xff0c;用于跟踪和显示数据包从源主机到目标主机所经过的每一跳&#xff08;路由器&#xff09;的路径。它能够帮助用户识别网络路径中的瓶颈和故障点。traceroute 的工作原理主要基于 ICMP&#xff08;Internet Control Message Protocol&a…...

Java数据结构与算法(红黑树)

前言 红黑树是一种自平衡二叉搜索树&#xff0c;确保在插入和删除操作后&#xff0c;树的高度保持平衡&#xff0c;从而保证基本操作&#xff08;插入、删除、查找&#xff09;的时间复杂度为O(log n)。 实现原理 红黑树具有以下性质&#xff1a; 每个节点要么是红色&#…...

SpringBoot RPM制作

安装依赖 [root20240423-instance4 ~]# yum install rpmdevtools2.初始化目录 [root20240423-instance4 ~]# rpmdev-setuptree [root20240423-instance4 ~]# tree rpmbuild/ rpmbuild/ ├── BUILD ├── RPMS ├── SOURCES ├── SPECS └── SRPMS5 directories, 0 …...

专转本上岸别太老实做这三件事

如果你专转本上岸&#xff0c;千万不要当老实人去做这三件事&#xff0c;真的没有必要&#xff0c;不但浪费时间&#xff0c;还会让你提前进入对未来的迷茫期。建议转本人们一定要知道&#xff0c;首先就是不要过度关注学分。因为转本上岸只有两年&#xff0c;我们属于大三&…...

Cisco网络工程师和网络安全视频教程(完整版)

0001.IT技术包括的技能 0002.课程目标.mp4 0003.Internet示意图.m 0004.局域网和广域网区 0005.服务器客户机mp4 0006.应用层和表示层.m.. 0007.会话层.mp4 0008.传输层.mp4 0009.网络层数据链路层 0010.OSI参考模型和网 0011.普换法排错.mp4 0012.OSI参考模型和网. 0013.网线和…...

如何在一个 JavaScript 文件中引入另一个 JavaScript 文件

在早期版本的 JavaScript 中,没有提供原生的模块导入功能,因此开发者们尝试过各种不同的方法来解决这个问题。然而,自 2015 年 (ES6) 以来,JavaScript 引入了 ES6 模块标准,这使得在 Node.js 中导入模块变得更加规范。现代浏览器也广泛支持这一标准。 为了与旧版浏览器兼…...

2024最新 Jenkins + Docker实战教程(七)- Jenkins实现远程传输和自动部署

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…...

WWW24因果论文(1/8) | 利用强化学习(智能体)进行因果问答

【摘要】因果问题询问不同事件或现象之间的因果关系。它们对于各种用例都很重要&#xff0c;包括虚拟助手和搜索引擎。然而&#xff0c;许多当前的因果问答方法无法为其答案提供解释或证据。因此&#xff0c;在本文中&#xff0c;我们旨在使用因果关系图来回答因果问题&#xf…...

比较kube-proxy模式:iptables还是IPVS?

kube-proxy是任何 Kubernetes 部署中的关键组件。它的作用是将流向服务&#xff08;通过集群 IP 和节点端口&#xff09;的流量负载均衡到正确的后端pod。kube-proxy可以运行在三种模式之一&#xff0c;每种模式都使用不同的数据平面技术来实现&#xff1a;userspace、iptables…...

CSS:浮动

▐ 文档流&#xff1a; 由于网页默认是一个二维平面&#xff0c;当我们在网页中一行行摆放标签时&#xff0c;块标签会独占一行&#xff0c;行标签则只占自身大小&#xff0c;这种情况下要实现网页布局就很麻烦了&#xff0c;所以我们就需要通过一些方法来改变这种默认的布局方…...

SQL 语言:嵌入式 SQL 和动态 SQL

文章目录 基本概述嵌入式 SQL动态 SQL总结 基本概述 嵌入式SQL和动态SQL是两种在应用程序中嵌入和使用SQL语句的方法。它们都允许开发人员在编程语言中编写SQL语句&#xff0c;以便在应用程序中执行数据库操作。然而&#xff0c;这两种方法在实现方式、性能和灵活性方面存在一…...

Java Object类方法介绍

Object作为顶级类&#xff0c;所有的类都实现了该类的方法&#xff0c;包括数组。 查询Java文档&#xff1a; 1、object.eauqls(): 其作用与 有些类似。 &#xff1a; 是一个比较运算符&#xff0c;而不是一个方法。 ①可以判断基本类型&#xff0c;也可以判断引用类型。 ②若…...

2024 京麟ctf -MazeCodeV1

文章目录 检查代码思路一个字节的指令注意附上S1uM4i佬们的exp https://www.ctfiot.com/184181.html 检查 代码 __int64 __fastcall check_solve(char *a1) {__int64 result; // rax__int64 v2; // rax__int64 index_step; // rax__int64 v4; // rax__int64 v5; // rax__int64…...

计算机网络基础 - 计算机网络和因特网(1)

计算机网络基础 计算机网络和因特网什么是 Internet?具体构造的的角度服务角度网络结构 网络边缘网络核心电路交换分组交换概述排队时延和分组丢失转发表和路由选择协议按照有无网络层的连接 分组交换 VS 电路交换 接入网DSL 因特网接入电缆因特网接入光纤到户 FTTH无线接入网…...

自学动态规划——零钱兑换

零钱兑换 322. 零钱兑换 - 力扣&#xff08;LeetCode&#xff09; 注意几个关键的地方&#xff1a; 因为每次都是找min&#xff0c;所以我们不能将所有元素都初始化为0&#xff0c;不然最后结果一定是0&#xff0c;这里我设置为0x3f3f3f3f&#xff0c;表示无解。当amount0的…...

当AI走进柴米油盐:我们的生活正在发生怎样的改变?

当清晨的AI闹钟根据你的睡眠周期轻声唤醒&#xff0c;通勤导航提前规避了突发拥堵的路段&#xff0c;办公软件里的AI一键生成了会议纪要与数据报表&#xff0c;回家路上智能家电已提前调好室温与灯光&#xff0c;睡前AI陪练帮孩子巩固了当天的知识点&#xff0c;也为独居的父母…...

成电计算机复试面试:如何用一份‘心机’简历引导老师提问,并提前准备好答案?

计算机复试策略&#xff1a;如何用结构化简历设计引导面试走向 站在电子科技大学计算机复试的考场外&#xff0c;大多数考生都在反复背诵技术概念和项目细节&#xff0c;却很少有人意识到——面试本质上是一场精心设计的对话博弈。那些最终获得高分的考生&#xff0c;往往不是知…...

手把手教你用SAM2和LoRA:基于CVPR25新思路的开放词汇分割实战(附代码)

手把手教你用SAM2和LoRA&#xff1a;基于CVPR25新思路的开放词汇分割实战&#xff08;附代码&#xff09; 开放词汇语义分割&#xff08;Open-Vocabulary Semantic Segmentation&#xff09;正成为计算机视觉领域的热点方向。传统语义分割模型受限于预定义的封闭类别&#xff…...

云容笔谈在自媒体内容生产中的提效实践:日更国风配图效率提升300%

云容笔谈在自媒体内容生产中的提效实践&#xff1a;日更国风配图效率提升300% 1. 自媒体内容创作的痛点与挑战 作为自媒体创作者&#xff0c;每天最头疼的就是配图问题。特别是做国风内容的账号&#xff0c;既要保持东方美学韵味&#xff0c;又要保证日更频率&#xff0c;传统…...

ai辅助硬件设计:让快马智能解析并生成db9接口与mcu连接的完整原理图与代码

在硬件开发中&#xff0c;DB9接口的设计与连接是个常见但容易出错的环节。最近我在一个嵌入式项目里需要实现STM32与DB9接口的RS-232通信&#xff0c;发现传统设计流程存在几个痛点&#xff1a; 引脚定义容易混淆 DB9公头和母头的引脚定义是相反的&#xff0c;比如母头的2号引脚…...

5分钟解锁跨平台微信:Docker容器化方案全攻略

5分钟解锁跨平台微信&#xff1a;Docker容器化方案全攻略 【免费下载链接】docker-wechat 在docker里运行wechat&#xff0c;可以通过web或者VNC访问wechat 项目地址: https://gitcode.com/gh_mirrors/docke/docker-wechat 还在为Linux系统无法使用微信而烦恼吗&#xf…...

PaddlePaddle GPU环境搭建:从驱动到深度学习库的完整指南

1. 为什么需要GPU加速深度学习&#xff1f; 如果你刚接触深度学习&#xff0c;可能会疑惑为什么大家都在讨论GPU。简单来说&#xff0c;GPU就像是个超级计算器&#xff0c;能同时处理大量简单计算。想象你要算100万道加减法题&#xff0c;用普通计算器&#xff08;CPU&#xf…...

Vivado MIG IP核实战:DDR3控制器配置与仿真全流程解析

1. Vivado MIG IP核与DDR3控制器基础认知 第一次接触DDR3控制器时&#xff0c;我被那些密密麻麻的时序图吓得不轻。直到发现Xilinx的MIG&#xff08;Memory Interface Generator&#xff09;IP核&#xff0c;才明白原来FPGA开发可以这么"偷懒"。这个IP核就像个贴心的…...

Phi-4-reasoning-vision-15B部署教程:开源大模型镜像适配国产GPU方案

Phi-4-reasoning-vision-15B部署教程&#xff1a;开源大模型镜像适配国产GPU方案 1. 模型介绍 Phi-4-reasoning-vision-15B是微软推出的视觉多模态推理模型&#xff0c;具备强大的图像理解和分析能力。这个15B参数规模的模型特别擅长处理需要结合视觉和语言理解的复杂任务。 …...

博德之门3 Mod管理器:解决Mod加载顺序被重置的终极指南 [特殊字符]

博德之门3 Mod管理器&#xff1a;解决Mod加载顺序被重置的终极指南 &#x1f3ae; 【免费下载链接】BG3ModManager A mod manager for Baldurs Gate 3. 项目地址: https://gitcode.com/gh_mirrors/bg/BG3ModManager 如果你在使用BG3ModManager&#xff08;博德之门3模组…...