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

于 2023-10-17 16:07:36 发布
阅读量1.5k 收藏 1
点赞数 1
文章标签： 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
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3 transform缩放空白隐藏 （占位策略）
天边逐云
05-15 7364
看了好多百度搜索出来的文章，没有找到想要的解决办法，这里我分享两个解决办法吧，若有不足之处请谅解，谢谢。 第一个，使用margin解决： 原理： 1、外层定容器（溢出隐藏） 2、内层定缩放（具体方法为：定原点，然后margin偏移） 缺点： 1、相对于部分垂直布局偏移距离实际是有误差的（原因没深入了解，有见解的请指点一下，谢谢），...
CSS 变换 transform(位置 translate,缩放 scale,旋转 rotate,中心点 origin)
卋舉
10-12 2492
位置 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
css transform:scale缩放后位置偏移问题解决
sunzhen15896的博客
09-01 9003
css相关问题
LogicFlow:流程可视化的前端框架
03-08
逻辑流 LogicFlow是一种流程可视化的前端框架，提供了一系列流程图交互，编辑所必需的功能和简单灵活的例程自定义，插件等扩展机制，方便我们快速在业务系统内部满足类流程图的需求。 特性 :bullseye:专业的 专注于业务流程可视化的解决方案 :rocket:快速建造 提供配套能力（undo /对齐线/键盘）快速构建流程图编辑器，提升研发效率 :hammer_and_wrench:高拓展性 提供自定义能力和插件能力，助力定制化的业务场景 使用 安装 # npm $ npm install @logicflow/core --save # yarn $ yarn add @logicflow/core 代码示例 // 创建容器 < div xss=removed> < / div > // 准备数据 const data = { // 节点 nodes : [ { id : 21 , type :
css3 transform过渡抖动问题解决
01-18
transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如： transform: scale(1.2); 换成： transform: scale(1.2) rotate(0.1deg); transform:translate();偏移会使图片或文字变得模糊 transform偏移还会使图片或文字失帧，变得模糊，可以使用clac解决 如： transform:translate(-50%); 换成： transform: translate(calc(-50% + 1px)); clac是css3
ts-transform-css-modules：从TypeScript所需的css模块文件中提取css类名
01-31
ts-transform-css-modules 从TypeScript所需的css模块文件中提取css类名。 这个插件是基于，因此构造函数的选择来自该仓库。 这使您可以在TS文件中执行此操作： // Import works import * as css from 'foo.css' // require also works const foo = require ( 'foo.css' ) console . log ( css . foo ) 在编译步骤中将此附加到before 。 有关更多信息，请参见 。 由于编译后TS修改了导入名称，因此，现在命名的导入将不起作用。 // Those are NOT working import css from 'foo.css' import { button , badge } from 'foo.css' 选件 有关选项列表，请参见 。 自订选项 tsImportResolver (path: string): string ：此回调函数使您可以为遇到的每个CSS文件覆盖ImportDeclaration导入路径。 当
css 块状元素和内联元素
12-12
在用CSS布局页面的时候，我们会将HTML标签分成两种，块状元素和内联元素（我们平常用到的div和p就是块状元素，链接标签a就是内联元素）。是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。 注：这节课看似挺长，其实内容很少，通过举例子让大家更容易理解而已，不要被眼前的文字和代码吓到哟~ 块状元素 一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。 内联元素 内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度
HTML5+CSS3
weixin_45257157的博客
12-29 611
HTML5 第二天 一、rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤： 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{ transform: rotate(0deg); } 二、三角 代码演示 二、设置元素旋转中心点(tran...
CSS新手教程：transform-origin属性详解 实操使用效果示例
ItStar
03-31 1271
相信熟悉CSS3动画的小伙伴们对这个属性应该不陌生了，这个属性能够为我们的动画添加更多有趣的效果，但同时其不够直观的特点也给大家带来一定学习上的困难。今天我们就来剖析一下这个属性。默认...
css transform scale设置后位置角度总是变化问题
llllllllllll666的博客
07-17 1589
-webkit-transformscale(xx);收缩的是***整个元素的大小***
css3的transform中scale缩放详解
01-19
下面我们从3个方面开始介绍： 1、scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。transform:scale(2,2.5);   2、scaleX(<number>) 元素只在X轴（水平方向）缩放元素。 默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点transform:scaleX(2);   3、scaleY(<number>) 元素只在Y轴（垂直方向）缩放元素。 基点一样在元素的中心位置。可以通过transform-o
CSS transform-origin属性的理解
09-22
主要介绍了CSS transform-origin属性的理解,详细的介绍了CSS transform-origin属性的作用及其实践，非常具有实用价值，需要的朋友可以参考下
transform-root-css::hammer_and_wrench:将样式规则返回为函数模板
05-16
转换根css 它是作为实用程序创建的，可在捆绑工具中使用，例如[** rollup **]（ ）。 支持状态 :check_mark: 包裹 :construction_worker: 网页包 :construction_worker: 将css转换为模板函数的目的很简单，例如：...
css3的transform造成z-index无效解决方案
01-19
昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。 只锁头效果很好，IE11下会小抖，但chrome下很稳定停在那里。后来又加上锁定列，发现列会盖住表头。 百度到这里《小心 CSS3 Transform 引起的 z-...
css-to-react-native-transform:将有效的 CSS 转换为 React Native 样式表对象
07-24
css-to-react-native-transform 之上的轻量级包装器，允许将有效的 CSS 转换为 React Native 样式表对象。 为了简单.myClass {} ，它只转换类选择器（例如.myClass {} ）和分组类选择器（例如.myClass, ....
CSS3中设置3D变形的transform-style属性详解
12-13
transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。 transform-style属性的使用语法非常简单： CSS Code复制内容到剪贴板 transform-style: ...
CSS3变形和动画：旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
lakenQi
10-09 1226
旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration、过渡函数 transition-timing-function、过渡延迟时间 transition-delay、Keyframes、调用动画、设置动画播放时间、设置动画播放方式、设置动画开始播放的时间、设置动画播放次数、设置...
css3缩放 transform: scale() 使用缩放之后顶点对齐问题
热门推荐
小糖穿越火线
06-13 2万+
css3缩放 transform: scale() 使用缩放之后顶点对齐问题 注意点：想要将缩放之后的div对齐顶点，那么需要将css属性设置为：transform-origin: 0 0 <div style="width: 900px; height: 900px; background: gray; overflow: auto;"> <div style="...
HTML CSS笔记变形效果-过渡效果-动画效果
weixin_34396103的博客
05-01 655
一．transformCSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个：transform 和 transform-origin。对于 transform 的属性值，具体如下表：//向水平和垂直各移动 200 像素，也可以使用百分比transform: translate(200px,200px); //向水平平移 200 像素，不加后面的 0 也可以 ...
csstransform-origin
最新发布
09-15
CSS的transform-origin属性是用于设置元素变换的基点或者中心点的属性。通过设置transform-origin属性，可以改变元素围绕其基点或中心点进行变换的方式和效果。transform-origin属性可以接受三个值，分别表示x轴、y轴和z轴上的基点位置。 默认情况下，transform-origin属性的值为50% 50% 0，也就是元素的中心点。 transform-origin属性的值可以是具体的单位值，比如像素(px)、百分比(%)、em等，也可以是关键词，比如top、right、bottom、left和center等。 通过设置不同的transform-origin属性值，可以实现元素的旋转、缩放、平移等变换效果。 如果需要更详细了解CSS的transform-origin属性，可以参考引用和中提到的相关内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值