CSS transform:rotate；无效问题

最新推荐文章于 2024-12-26 08:17:16 发布
原创 最新推荐文章于 2024-12-26 08:17:16 发布 · 1.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #rotate

CSS设置旋转 transform:rotate无效。

今天遇到一个奇怪的问题，CSS给 icon图标设置一个hover 旋转180deg的效果，不生效。
一度任务样式被覆盖了，样式不生效没选中元素的class。但是设置hover改变大小是生效的。奇怪了？

为什么会无效呢？

原因：CSS的rotate只 对block或 inline-block类型元素有效。
可以把元素设为 display:inline-block 行内块元素。

测试：旋转生效。

追求者2016
关注
解决rotate旋转角度无效的问题
小太阳的博客
03-29 1726
场景，项目中需要根据风向显示不同方向的图标，如下图： 我用span标签写的图标，发现并没有旋转。代码如下 <div class="weather-ws"> <span :style="{transform:item.wsDirect !== 'NaN'? getRorate(item.wsDirect):'rotate(0)'}" class="wind-direction" >{{ '➤' }}&
【CSS】transform相关知识点
Komorebi_00的博客
11-08 1596
transform的使用
CSS-transform:rotate()没效果
weixin_46479909的博客
10-25 1428
原因：CSS的rotate只对block或inline-block类型元素有效。可以把元素设为display:inline-block行内块元素。
解决CSS transform:rotate；无效
m0_52364694的博客
06-01 3299
CSS的rotate只 对block或 inline-block类型元素有效
css旋转无效果问题
Cchen的博客
01-17 1308
1、语法问题，比如下面图的分号使用到中文的，无效果 2、需要转换成块元素或者行内块元素
transform:rotate失效
12-31 5510
项目里面经常用到一些icon图标需要旋转角度，这不，有个向下的箭头直接用的大于号转90度就行了，直接用了个： <span class="angle">></span> <style> .angle{ transform:rotateZ(90deg); } </style> 如上代码：rotateZ不管用，这不，我就去MDN找答案去了结果在这...
transform: rotate(270deg);
最新发布
10-31
[2]中说明内联元素（如字体图标）使用rotate无效，需要设置display: inline-block或block。 [3]介绍了transform是移动、旋转、缩放和倾斜等效果的集合，以及2D变形涉及的主要属性。 因此，在回答中需要包含： 1. ...
css3的transform造成z-index无效解决方案
01-19
昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。 只锁头效果很好，IE11下会小抖，但chrome下很稳定停在那里。后来又加上锁定列，发现列会盖住表头。 百度到这里《小心 CSS3 Transform 引起的 z-...
CSS之transform 2D 与 3D 转换（十五）
全粘小谭的博客
10-06 1202
该文主要讲解了围绕transform属性展开的2D转换，3D转换等一系列相关属性的用法及注意事项，字数较多，建议细嚼慢咽。
@font-face { font-family: 'spider'; src: url(../Fonts/恐怖蜘蛛.ttf) format("truetype"); } * { box-sizing: border-box; } html { font-family: 'spider', serif; min-width: 100vw; min-height: 100vh; } body { margin: 0; background: radial-gradient(#F15F66, #b46065); } .game-title { color: bisque; text-align: center; font-size: 3em; } .game-container { display: grid; grid-template-columns: repeat(8, auto); justify-content: center; gap: 10px; perspective: 500px; } .game-info-box { grid-column: 1/-1; display: flex; justify-content: space-between; } .game-info { color: rgb(13, 233, 233); font-size: 30px; } .card { position: relative; height: 180px; width: 130px; } /* .card:hover .card-back { transform: rotateY(-180deg); } .card:hover .card-front { transform: rotateY(0deg); } */ .card-back { transform: rotateY(0deg); } .card-front { transform: rotateY(-180deg); } .card[data-turn="front"] .card-back { transform: rotateY(-180deg); } .card[data-turn="front"] .card-front { transform: rotateY(0deg); } .card-face { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 12px; border: 1px solid; font-size: 5em; backface-visibility: hidden; transition: transform 500ms ease-in-out; } .card-back { background-color: black; border-color: #FF6D00; } .card-front { background-color: antiquewhite; border-color: black; transform: rotateY(180deg); } .cobweb { width: 45px; height: 45px; position: absolute; transition: width 100ms ease-in-out, height 100ms ease-in-out; } .card-face:hover .cobweb { width: 50px; height: 50px; } .cobweb-top-left { top: 0; left: 0; transform: rotate(270deg); } .cobweb-top-right { top: 0; right: 0; } .cobweb-bottom-left { bottom: 0; left: 0; transform: rotate(180deg); } .cobweb-bottom-right { bottom: 0; right: 0; transform: rotate(90deg); } .spider { align-self: flex-start; transform: translateY(-20px); transition: transform 100ms ease-in-out; } .card-back:hover .spider { transform: translateY(0); cursor: pointer; } .card::before, .card::after { content: attr(data-value); font-size: 30px; position: absolute; } .card::before{ top: .1rem; left: .1rem; } .card::after{ bottom: .1rem; right: .1rem; transform: rotate(180deg); } .card.red{ color:red; display: flex; justify-content: center; align-items: center; } .card .love{ font-size: 4rem; } .card.black{ color:black; display: flex; justify-content: center; align-items: center; } .end{ width: 200px; margin: 50px auto; /* background-color: white; */ } .startBtn{ width: 200px; height: 50px; outline: none; text-align: center; background-color: transparent; border-radius: 10px; border: 2px solid salmon ; color: aliceblue; line-height: 50px; font-size: 20px; font-family: 'spider', serif; cursor: pointer; }这是css
08-29
transform: rotate(180deg); } .cobweb-bottom-right { bottom: 8px; right: 8px; transform: rotate(90deg); } .spider { width: 45px; height: 45px; filter: invert(1); transition: transform 0.3...
transform:rotate(45deg)不生效
票票的博客
04-26 2572
设置在内联元素上才生效 display: inline-block; transform: rotate(45deg);
css 设置 transform 无效
yiyueqinghui的博客
06-29 1613
经过测试发现： display值为block/inline-block/grid/table/inline-table…都可以， 总的来说，就是常用的几个display属性值中，除了inline/contents不行，其他都可以。 参考链接：https://blog.youkuaiyun.com/yxyy3511/article/details/88015594 ...
css transtion不生效_css 子元素transition动画为什么无效？
weixin_42404983的博客
12-24 729
写了个模态窗口的飞入效果提示#mask{display: none;width: 100%;height: 100%;z-index: 100;position: fixed;background-color: rgba(0, 0, 0, 0.8);text-align: center;}#tips{position: absolute;background-color: #0b93d5;widt...
字体图标不能实现transform: rotate(180deg) 没生效
weixin_45309872的博客
07-11 3761
想让箭头选装, 但是直接加rorate没用, 则主要添加dispaly: inline-block 问题解决 https://blog.youkuaiyun.com/qq_29954811/article/details/90511568 解决问题之四：transform的rotate在内联元素上面不起作用 问题：直接引用transform: rotate(270deg);不起效 解决：加入di...
浮动引起的问题
一朋的博客
09-12 757
float浮动引起的问题： 父元素的高度坍塌，即变为0； 如果父元素里所有的元素都浮动，浮动之后从父元素里面“跑”了出去，相当于父元素里面没有了元素，高度没有元素“撑起来”，所以就会造成父元素的高度变为0的情况。 影响内联元素的位置； 假设父元素里有浮动元素和内联元素，假设浮动元素在内联元素的右边且元素往左浮动，内联元素会被“挤”到浮动元素的右边，同理，如果浮动元素在内联元素前面且浮动元素往右浮动，也会将内联元素“挤”到左边，影响内联元素的位置。这种情况就要控制浮动元素浮动的位置或者控制内联
css遗忘篇:transform:ratate(180deg)失效的解决方法
webfullstack的博客
08-28 1620
.empMoreInfoControl { position: relative; .iconfont { position: absolute; top:.05rem; margin-left:.1rem; @extend .animation1; } &amp;amp;.active { .iconfont { position: a...
直接使用transform: rotate(270deg)；不起作用，如何解决？
王铁柱666的博客
12-26 593
属性在现代浏览器中有很好的支持，但在一些较旧的浏览器版本中可能不支持。：确保你的 CSS 选择器正确选中了想要旋转的元素。检查你的 HTML 和 CSS，确认选择器与元素匹配。：确保你的 CSS 文件已经被正确链接到 HTML 文件中，并且没有因为缓存问题而导致样式未更新。是相对于元素自身的中心点进行变换的。：确保你的 CSS 是按照标准书写的，并且你的开发环境支持相应的 CSS 版本和模块。：检查你的 CSS 代码是否有语法错误，比如缺少分号、大括号不匹配等。：可能有其他的 CSS 规则覆盖了你的。
使用CSS将图标进行旋转无效
Shivy_的博客
12-21 2150
使用css将图标进行旋转的方法如下： html <!-- 向左的箭头 --> <i class="icon-back"></i> 使用 css 的 transform 属性，将箭头进行旋转 css // 向左的箭头 旋转为向下的箭头 .icon-back { display: inline-block transform: rotate(-90deg) } 注意： 必须添加 display: inline-block 这个属性，否则会导致，旋转无效。 .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值