CSS使用transform-origin，解决transform: scale()后导致的页面元素位置偏移

最新推荐文章于 2024-09-25 13:02:15 发布
最新推荐文章于 2024-09-25 13:02:15 发布
阅读量2.4k 收藏 3
点赞数 3
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m_e_i/article/details/133886432
版权

没有使用transform: scale前

使用transform: scale后

这时候出现了位置偏移的问题

这时候使用transform-origin给一个0% 0%  上下，左右的偏移

这时候位置就回到了原先的定位

 

孜然卷k
关注
CSS 变换 transform(位置 translate,缩放 scale,旋转 rotate,中心点 origin)
卋舉
10-12 2626
位置 transform:translate(100px); 宽高(缩放 scale) transform:scale(1.5,1.5); 旋转(旋转 rotate) transform:rotate(45deg); 控制中心点(原点 origin) transform-origin:150px 100px; 动画 (transition) transition:all .5s ease-in 0s; <!DOCTYPE html> <html lang="zh-CN"> <h
CSS3 之 2D转换——移动translate、旋转rotate、旋转中心点transform-origin、缩放scale
qq_43623147的博客
12-17 5725
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移translate、旋转rotate、缩放scale等效果。 一、二维坐标系 2向右和向下变大二、2D转换之移动translate 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。 1. 语法 transform: translate(x,y); //或者分开写 transform:translateX(n); transform:translateY(n); 2. 重点 定义2D转换中.
transfrom scale缩放出现偏移的情况
Pure_White520的博客
09-06 958
修改scale后的偏移问题
CSS 实现元素根据自身位置进行偏移
最新发布
y523648的博客
09-25 339
我们想让第4个红色的方块，从原来的位置向上调整一些。不用Javascript去获取原来的位置，用CSS实现。
CSS3 Transform——transform-origin
lhf2009913的专栏
05-15 898
在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？ 多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。不过，CSS3将要改变设计师这种思维，进入CSS3时代，借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。 在20
css transform:scale缩放后位置偏移问题解决
热门推荐
sunzhen15896的博客
09-01 1万+
css相关问题
[css] transform-origin
weixin_36210698的博客
03-21 583
transform-origin 原文链接： transform-origin transform-origin CSS 属性让你更改一个元素变形的原点。 在 CodePen中打开示例 转换起点是应用转换的点。例如，rotate()函数的转换原点是旋转中心。(这个属性的应用原理是先用这个属性的负值转换该元素，进行变形，然后再用这个属性的值把元素转换回去) 语法 /* One-value sy...
CSS transform-origin
CyberPlayer的博客
03-01 1万+
一、transform-origin属性介绍 transform-origin属性表示在对元素进行变换的时候，设置围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即是元素X轴和Y轴的50%处，如下图所示： 我们没有使用transform-origin改变元素原点位置的情况下，CSS变换进行的旋转、移位、缩放等操作都是以元素自己中心（变换原点）位置进行变换的。但很多时候需要在不同的位置对元素进行变换操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原.
CSS中的transform-origin
m0_64415782的博客
09-09 4045
CSS3 transform-origin详解
css之transform-origin
软考鸭
07-07 941
是 CSS 中的一个属性，它允许你改变一个元素变形的原点。默认情况下，变形的原点位于元素的中心点，即50% 50%（或 center center）。但是，通过使用属性，你可以将变形的原点移动到元素上的任何位置。
CSS动画transform的偏移translate、拉伸skew、缩放scale、旋转rotate、perspective透视
Qian_mos的博客
04-26 8442
transform的介绍：为CSS元素添加偏移、拉伸、旋转、缩放等效果 几个属性值 常用四个2D视觉效果属性----translate、skew、scale、rotate .box { transform: translate(10px, 20px) //在x轴向右平移10个像素点，y轴向下平移20个像素点 transform: translate(20%, 20%) /...
使用scale 和 transform-origin 实现下划线跟随效果
weixin_42915204的博客
08-15 363
使用scale 和 transform-origin 实现下划线跟随效果 难点所在 这个动画效果中，下划线是从一端进入，从另外一端离开的。而且，这个 hover 动画是纯 CSS 实现的。 还原效果 正常而言，我们一个 hover 效果，可能就是从哪里来，回哪里去，大部分的应该是这样的： html : &amp;amp;lt;div&amp;amp;gt;hover me&amp;amp;lt;/div&amp;amp;gt; cs...
iframe transform-origin:0 top 0
09-07
在CSS中，`transform-origin`属性用于指定CSS转换的原点。当对一个元素应用旋转、缩放、平移等转换时，原点就是参考的位置。而`iframe`标签用于在网页中嵌入另一个网页。 在给`iframe`元素的`transform-origin`属性...
平面（2D）转换：使用transform属性实现元素的位移、旋转、缩放等效果
weixin_47448904的博客
10-09 1424
目标：使用translate快速实现绝对定位的元素居中效果。目标：使用transform-origin属性改变转换原点。目标：使用transform复合属性实现多形态转换。目标：使用translate实现元素位移效果。目标：使用rotate实现元素旋转效果。目标：使用scale改变元素的尺寸。平面转换也叫2D转换。
CSS的transform-origin 属性
weixin_45663697的博客
11-30 953
定义和语法 语法 transform-origin: x-axis y-axis z-axis; 默认值 transform-origin:50% 50% 0; 单位 transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。 属性值详解 没有旋转的时候 下面例子都旋转45°，transform: rotate(45deg); 默认位置是以元素中心为基点 transform-origin: 50% 5
CSS3 transform-origin 属性
霖霂晗的专栏
03-11 1022
CSS3 transform-origin 属性 #div1 { position: relative; height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px soli
页面偏移transform
当下的七炎
11-01 1211
//核心代码就这两句，上面是偏移长度，下面 相当于动画时间 $(".box").css({"-webkit-transform":"translateX(150px)"}); $(".box").css( {"-webkit-transition": "all 0.4s"}); //用这两句可以做http://caibaojian.com/demo/2014/4/off-canvas-men
css transform scale设置后位置角度总是变化问题
llllllllllll666的博客
07-17 1747
-webkit-transformscale(xx);收缩的是***整个元素的大小***
CSS中 transform: scale , transform-origin 属性
HWL5679的博客
06-25 610
transform属性允许你对元素进行 2D 或 3D 转换。scale()函数是transform属性的一个值，用于放大或缩小元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值