如何在css中垂直翻转铁图标
在CSS中垂直翻转铁图标可以使用transform属性来实现。具体步骤如下：
- 首先，为铁图标的父元素添加一个容器，用于包裹铁图标。
<div class="icon-container">
<i class="iron-icon"></i>
</div>- 接下来，在CSS中定义.icon-container类，设置其宽度和高度，并将其position属性设置为相对定位。
.icon-container {
width: 20px;
height: 20px;
position: relative;
}- 然后，为.iron-icon类添加样式，设置其宽度和高度，并使用transform属性进行垂直翻转。
.iron-icon {
width: 100%;
height: 100%;
transform: scaleY(-1);
}通过设置transform: scaleY(-1)，可以将图标在垂直方向上进行翻转。其中，scaleY(-1)表示在Y轴方向上进行缩放，-1表示翻转。
这样，就可以在CSS中实现垂直翻转铁图标了。
推荐的腾讯云相关产品：腾讯云云服务器（CVM） 腾讯云云服务器（CVM）是一种可随时扩展的云计算服务，提供高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同配置的云服务器，并通过腾讯云控制台进行管理和操作。
产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
3回答
动画链接下划线不适用于垂直文本
html、css
我试着使用这个来动画我的链接。
但是，对于垂直文本，它实际上不起作用，
我能改变什么(如果可能的话)使垂直文本与此动画正确划线？
HTML：
<div class="hlinks">
<a href="about.html">ABOUT</a> —
<a href="contact.html">CONTACT</a>
</div>
CSS：
.hlinks {
writing-mode: vertical-rl;
posit
浏览 0提问于2018-04-10得票数 3
回答已采纳
3回答
使用div标签的完美水平方形钻石流程图符号
html、css、css-shapes、css-transforms
我想使用CSS3变换将<div>压缩成一个完美的流程图决策符号。
我的CSS
.diamond {
top: 100px;
left: 100px;
height: 75px;
width: 200px;
position: absolute;
border: solid 1px black;
transform: skewX(-46deg) skewY(-11deg) scaleY(0.5) rotate(45deg);
-webkit-transform: skewX(-46deg) skewY(-11deg) scaleY(0
浏览 6提问于2016-03-20得票数 2
回答已采纳
1回答
在Angular Material排序标题中创建自定义箭头
javascript、css、angular、angular-material
我正在创建Angular 5项目，我想在排序标题中创建自定义排序图标来实现此效果。我不想有这个默认的箭头。
我试着改变css样式，但似乎不起作用。或者，有没有办法通过使用JS自定义来替换这个图标？
::ng-deep {
.cdk-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absol
浏览 1提问于2018-12-06得票数 0
1回答
悬停后如何阻止图标抖动？
javascript、html、css、font-awesome
我正在尝试创建一个心形悬停链接。所有的CSS都在工作，但是当我悬停在父div元素上时，图标会有一些抖动。我不知道如何解决这个问题，我尝试了一些方法，但仍然没有奏效。请救救我！它可能知道第一眼就可以看到，但仔细观察，我相信你也会注意到的！
body {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
align-items: center;
justify-content: space-eve
浏览 10提问于2022-11-14得票数 1
3回答
Chrome中的显示表和表格单元格错误
css、css-tables
HTML
<div class="circle">
<div class="content">
<span><h3>heading</h3><p>slogan goes here</p></span>
</div>
</div>
CSS
.circle {
position: relative;
width: 0;
height: 0;
padding: 20%;
margin: 1em auto;
浏览 0提问于2013-08-09得票数 2
回答已采纳
我在使用translate css函数时遇到了问题。
我有如下HTML。
<div class="outer-div">
<img src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png"/>
<div class="inner-div">
Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Lo
浏览 0提问于2016-12-15得票数 0
1回答
如何防止CSS转换影响页面上的其他图标？
html、css
在此之前，谢谢你抽出时间为我看这个。我对制作网站有点陌生，我知道一些基本知识，以及一些先进的东西。我正在处理我的投资组合页面，我使用图标进行导航。我把它们都放在一个div里面，把它们放在相对位置上，这样我就可以把它们放在div里了。当我向图标添加CSS转换以使其在悬停时放大时，我的问题就出现了。当我鼠标对它们做鼠标时，图标就会将其他图标推倒。我知道我可以使用绝对定位，这是不会发生的，但我宁愿不这样做。有小费吗？
这是我的密码：
HTML：
<div id="container_1">
<img class="icon" id="
浏览 1提问于2013-12-01得票数 0
回答已采纳
3回答
div包含的H3不能垂直居中。
html、css
我对我的h3有一个问题，不是垂直对中。在萤火虫中，如果我将顶部:50%改为顶部:51%，然后再回来，它会自行修复。
div中的H3需要垂直居中。
链接：
css：
.review-large {
text-align: center;
clear: both;
margin-top: 20px;
margin-bottom: 50px;
position: relative;
width: 100%;
min-height:127px;
background-image: url(../images/review-images/q
浏览 6提问于2015-02-27得票数 0
回答已采纳
1回答
Matlab矩形属性-绘制时的“位置”描述混乱
matlab、matlab-figure
我正在运行Matlab R2014b，并在给定特定坐标的图像上绘制矩形。
要清楚，例如画一个rectangle100,100,200，50是画一个矩形，其左角在水平方向和垂直方向上与图像左上角相距100像素，宽度为200，高度为50。以下代码起作用：
figure;
imshow(im);
rectangle('Position',[100, 100, 200, 50],'edgeColor','r');
但是在得到上面正确的方法之前，我运行doc rectangle，命令给出类似于rectangle('Position',[x,
浏览 4提问于2017-06-08得票数 0
回答已采纳
3回答
输入占位符在firefox中未垂直对齐
html、css、twitter-bootstrap、firefox、placeholder
在我的网站中，文本输入的占位符位于文本输入的较高位置，仅在firefox中。在所有其他浏览器中，它都是垂直居中的。
firefox的图像：
使用完全相同的代码，它在火狐中垂直居中。
当它不在jsfiddle的顶部时，是什么原因导致它出现在我的网站的firefox输入的顶部？
代码：
html：
<div id="search-button">
<input id="search-input" placeholder="SEARCH KEY WORD"></input>
浏览 0提问于2016-04-05得票数 3
2回答
响应菜单-子菜单问题
jquery、html、css
我把我的头发都拔出来了。这将是一些简单的事情，但我找不到。
我要移动时的子菜单下来。不要悬停在其他物品上。就像下面的屏幕快照：
你可以在这里看到它：
这里是我的html:
<div class="header-wrapper">
<div class="nav-wrapper">
<div class="nav-inner">
<img class="logo" src="images/andrews-lo
浏览 5提问于2016-06-13得票数 2
回答已采纳
2回答
CSS -带边框半径的动画比例
css、animation、transform
我正在做一个缩放长方体的动画，它是用8px舍入的。参考：。然而，当长方体展开时，圆角是奇怪的，我不想通过改变它的宽度来缩放它。如何正确缩放带圆角边框的圆角框？
#box {
position: relative;
width: 55px;
height: 55px;
background: #aaa;
margin: 0 auto;
border-radius: 8px;
animation-name: singleRevert;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#box
浏览 3提问于2018-10-15得票数 3
4回答
CSS圆角不适用于所有图标
html、css
有人能告诉我为什么border-radius:50%属性不适用于所有图标吗？我必须为每一个都写不同的填充设置，但我想要做的都是一样的。
.social a {
font-family: "FontAwesome";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
line-height: 0;
width: 20px;
浏览 0提问于2018-04-12得票数 0
1回答
将Div元素垂直居中
html、css、vertical-alignment
我在一个非常基本的网站模板上工作，左上角有固定的标题，左下角和右下角有固定的底线。
中间的内容应该是居中的，我只是不能完全弄清楚我做错了什么。
问题1。)如果移除height: 100% css属性，为什么垂直居中不起作用？
问题2。)当在html标记上声明height: 100%时，为什么站点大于100%并延伸到浏览器窗口之外？
问题3。)为什么bottom-left显示正确，但bottom-right显示不正确
问题4。)如果with设置为100%，文本右对齐，文本不应该从浏览器右框架开始并向左延伸吗？为什么要扩展浏览器窗口？
非常感谢你的帮助。代码在下面可见
<!DOCTYPE h
浏览 0提问于2012-05-16得票数 0
3回答
无法对齐垂直元素
html、css
首先，图标和标签是正确的中心。但我需要使锚display: inline-block;使可点击区域的全部网格的大小在其中。只有标签本身是中心的，而图标是在标签之上。
我试过使用vertical-align: middle;和align-items: centre;。
如何使图标和标签垂直对齐？
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap');
body {
display: grid;
grid-template-rows: 15%
浏览 5提问于2022-05-20得票数 0
回答已采纳
2回答
带纵横比的中心分割
html、css、centering、aspect-ratio
我需要在html视图中居中放置一个Div。它应该在垂直和水平方向上都居中。但Div应该保持其宽高比(4/3)，并且最小边距为10px。
我做了一个Javascript：
function resizeWindow() {
var wHeight = $(document).height() - 20;
var wWidth = $(document).width() - 20;
var gameStage = $("#gameStage");
if ((wWidth / 4) * 3 <= wHeight) {
gameStage.css("width
浏览 0提问于2015-08-26得票数 3
3回答
为什么当我向下移动文本时，浏览器内部会出现另一个垂直滚动条？
javascript、jquery、html、css
为什么当我向下移动我的文本时，另一个垂直滚动条出现在浏览器的内部，它的右边宽度大约是1000px，有没有办法延长我的页面的长度，或者有一个简单的方法来隐藏垂直显示的滚动条？我仍然希望显示默认的浏览器垂直滚动条。感谢所有的提示，谢谢！
如果你需要看我的任何代码，只需再次说声谢谢！HTML：
<head>
<meta charset="utf-8" />
<title> Iamdrivingtoday.com </title>
<link rel="stylesheet" href
浏览 0提问于2014-07-31得票数 1
3回答
<a>标签未覆盖<div>的正确区域
html、css、hyperlink
我有以下几点：
HTML：
<div id="about" class="menu1"> <a href="#">About</a></div>
<div id="aboutsub">
<div id="team" class="menu2"> <a href="">Team</a></div>
<div id="e
浏览 4提问于2014-02-11得票数 1
回答已采纳
2回答
添加CSS脉冲动画时Safari (OSX和iPad)中的定位/呈现问题
css、safari、position、css-animations、pulse
我想用CSS动画在垂直和水平中心的图像上创建一个脉冲动画。这在Firefox和Chrome (移动版和OSX版本)中运行得很好。但是在Safari中搞砸了，图像的定位是不正确的。
奇怪的是，在切换台式机(三根手指向左或向右滑动)并返回到safari后，图像被正确定位。
为了显示问题，我创建了一个jsfiddle，除了-webkit之外，我省略了所有前缀。
JSfiddle这里：
<article>
<img src="http://lorempixel.com/600/400/sports/">
</article>
CSS
artic
浏览 2提问于2016-02-10得票数 1
1回答
如何水平拆分网页？
html、css
我想水平拆分一个网页，这样我就可以滚动一个网站，而另一个网站保持不动。但我很难做到这一点。我在W3CHOOLS上找到了以下代码，但它只能垂直工作。
HTML：
<div class="split left">
<div class="centered">
<img src="img_avatar2.png" alt="Avatar woman">
<h2>Jane Flex</h2>
<p>Some text.</p>
浏览 1提问于2020-03-12得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
