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

inline的盒子设置transform不生效

目录

    • 如何遇到的问题
    • 原因
    • 为什么会这样
    • 怎么解决

如何遇到的问题

最近在开发过程中,因为需要对一个icon进行旋转,而icon本身,是设置span的伪类来进行的,结果我发现无论怎么设置transform都无法使其生效。

  span::before {font-family: element-icons !important;content: "\e6c9";transform: rotate(180deg);}

原因

经过我的测试和网上找到的原因,它们相互印证这样一个结论:inline的盒子设置transform不生效。

为什么会这样

inline元素被视为一行中的文本片段,其大小由内容决定,并且不允许通过transform属性来改变其尺寸、位置或旋转。transform属性通常用于块级元素或行内块级元素,因为这些元素有明确定义的宽度和高度,可以进行变换操作。

怎么解决

要解决这个问题,可以将元素的display属性更改为inline-block或block。这样做后,transform属性就会生效。

  span::before {font-family: element-icons !important;content: "\e6c9";transform: rotate(180deg);display: inline-block;}

如果你仍然希望元素保持display: inline,但仍然需要应用变换效果,可以考虑将元素包裹在一个块级元素中,然后在该块级元素上应用transform属性。

<div class="outer-wrapper"><span class="inline-box"></span>
</div>
  .outer-wrapper {transform: rotate(180deg);}.inline-box::before {font-family: element-icons !important;content: "\e6c9";}

相关文章:

inline的盒子设置transform不生效

目录 如何遇到的问题原因为什么会这样怎么解决 如何遇到的问题 最近在开发过程中&#xff0c;因为需要对一个icon进行旋转&#xff0c;而icon本身&#xff0c;是设置span的伪类来进行的&#xff0c;结果我发现无论怎么设置transform都无法使其生效。 span::before {font-famil…...

自然语言处理学习笔记(四)————词典分词

目录 1.中文分词 2.词典分词 &#xff08;1&#xff09;词的定义 &#xff08;2&#xff09;词典性质——齐夫定律 &#xff08;3&#xff09;词典 &#xff08;4&#xff09;加载词典 &#xff08;5&#xff09;hanlp词典路径 1.中文分词 中文分词&#xff1a;指的是将一…...

jsoncpp库和nlohmann-json库实现JSON与字符串类型转换

在ROS中&#xff0c;可以使用jsoncpp库来实现JSON与字符串类型之间的转换。jsoncpp是ROS自带的一个JSON库&#xff0c;它提供了一些函数来解析和生成JSON数据。 下面是一个使用jsoncpp库实现JSON与字符串类型转换的示例代码&#xff1a; #include <ros/ros.h> #include…...

20230803 函数传参引用

定义多输出变量的函数时&#xff0c;通过直接传参数内存地址在函数内部直接修改外部变量的值。需要定义函数时 在输入参数前加 引用符号 & 。 C 值传递、指针传递、引用传递详解...

IDEA SpringBoot项目引入外部jar并打包

1、首先&#xff0c;我们再pom.xml中导入依赖包时&#xff0c;打包可以正常进行。 但如果我们引入了第三方的外部jar包&#xff08;这里需要先把jar包添加到该项目依赖库中&#xff0c;这里不做演示&#xff09;&#xff0c;如图 2、导致打包时报错&#xff0c;程序包不存在或…...

ModaHub魔搭社区——阿里云通义千问宣布开源!70亿参数模型上线魔搭社区,免费可商用

通义千问开源!8月3日,AI模型社区魔搭ModaHub上架两款开源模型Qwen-7B和Qwen-7B-Chat,阿里云确认其为通义千问70亿参数通用模型和对话模型,两款模型均开源、免费、可商用。在多个权威测评中,通义千问7B模型取得了远超国内外同等尺寸模型的效果,成为当下业界最强的中英文7B…...

Jenkins 自动化部署实例讲解,另附安装教程!

【2023】Jenkins入门与安装_jenkins最新版本_丶重明的博客-CSDN博客 也可以结合这个互补看 前言 你平常在做自己的项目时&#xff0c;是否有过部署项目太麻烦的想法&#xff1f;如果你是单体项目&#xff0c;可能没什么感触&#xff0c;但如果你是微服务项目&#xff0c;相…...

arcgis字段计算器

1、两字段叠加。要求待叠加的字段类型为文本或字符串类型。如下&#xff1a; 2、字符串部分提取。...

数据结构: 线性表(无哨兵位单链表实现)

文章目录 1. 线性表的链式表示: 链表1.1 顺序表的优缺点1.2 链表的概念1.3 链表的优缺点1.4 链表的结构 2. 单链表的定义2.1 单链表的结构体2.2 接口函数 3. 接口函数的实现3.1 动态申请一个结点 (BuySListNode)3.2 单链表打印 (SListPrint)3.3 单链表尾插 (SListPushBack)3.4 …...

Exploring the Underlying Architecture of CSS3

引言 在现代的网页设计中&#xff0c;CSS&#xff08;层叠样式表&#xff09;起着至关重要的作用。CSS3作为最新的CSS标准&#xff0c;引入了许多令人兴奋的功能和特性。但是&#xff0c;要真正理解CSS3的底层架构实现原理&#xff0c;对于前端开发者来说&#xff0c;是非常重…...

方差分析||判断数据是否符合正态分布

方差分析练习题 练习学习笔记&#xff1a; &#xff08;1&#xff09; 标准差和标准偏差、均方差是一个东西。标准误差和标准误是一个东西。这两个东西有区别。 &#xff08;2&#xff09;单因素方差分析&#xff08;MATLAB求解&#xff09; &#xff08;3&#xff09;使用an…...

java linq多字段排序时间比较

public static void main(String[] args) {//100万条数据List<CrmInvestSaleUserCount> waitAssignUserList new ArrayList<>();for (int i 0; i < 1000000; i) {waitAssignUserList.add(new CrmInvestSaleUserCount().setSales_username("test" i…...

【c++】rand()随机函数的应用(二)——舒尔特方格数字的生成

目录 一、舒尔特方格简介 二、如何生成舒尔特方格 &#xff08;一&#xff09;线性同余法 1、利用线性同余法生成随机数序列的规律 (1) 当a和c选取合适的数时&#xff0c;可以生成周期为m的随机数序列 (2) 种子seed取值也是有周期的 2、利用线性同余法生成5阶舒尔特方格…...

“深入剖析JVM内部机制:探索Java虚拟机的运行原理“

标题&#xff1a;深入剖析JVM内部机制&#xff1a;探索Java虚拟机的运行原理 摘要&#xff1a;本文将深入探讨Java虚拟机&#xff08;JVM&#xff09;的内部机制&#xff0c;包括类加载、内存管理、垃圾回收、即时编译等关键概念和原理&#xff0c;帮助开发者更好地理解JVM的运…...

pandas 新增数据列的几种方式

准备数据 将下面的数据存到csv中 ymd,bWendu,yWendu,tianqi,fengxiang,fengli,aqi,aqiInfo,aqiLevel 2018-01-01,3℃,-6℃,晴~多云,东北风,1-2级,59,良,2 2018-01-02,2℃,-5℃,阴~多云,东北风,1-2级,49,优,1 2018-01-03,2℃,-5℃,多云,北风,1-2级,28,优,1 2018-01-04,0℃,-8℃…...

linux_驱动_iic总线获取si7006温湿度

应用层si7006.c #include<stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <stdlib.h> #include <string.h> #include <sys/ioctl.h> #include <arpa/inet.h>…...

虚拟机网络图标不见了

有3台虚拟机之前正常运行的&#xff0c;有一天打开虚拟机发现2台虚拟机的网络连接图标不见了&#xff0c;也ping不通另外两台。 解决&#xff1a;在终端执行以下命令&#xff0c;即可ping通 [roothadoop103 ~]# sudo nmcli network off [roothadoop103 ~]# sudo nmcli network…...

CTF:信息泄露.(CTFHub靶场环境)

CTF&#xff1a;信息泄露.&#xff08;CTFHub靶场环境&#xff09; “ 信息泄露 ” 是指网站无意间向用户泄露敏感信息&#xff0c;泄露了有关于其他用户的数据&#xff0c;例如&#xff1a;另一个用户名的财务信息&#xff0c;敏感的商业 或 商业数据 &#xff0c;还有一些有…...

Redis学习总结

Redis学习总结 文章目录 Redis学习总结Radis基本介绍docker的安装基本数据结构通用命令字符型key的层次结构Hash类型Listset sortedset集合redis的java客户端jedis的使用jedis连接池的配置 SpringDataRedis自定义redistemplate的序列化与反序列化方式stringtemplate的使用 redi…...

云原生全栈体系(二)

Kubernetes实战入门 第一章 Kubernetes基础概念 一、是什么 我们急需一个大规模容器编排系统kubernetes具有以下特性&#xff1a; 服务发现和负载均衡 Kubernetes 可以使用 DNS 名称或自己的 IP 地址公开容器&#xff0c;如果进入容器的流量很大&#xff0c;Kubernetes 可以负…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...