CSS中定位和TRANSFORM的比较

最新推荐文章于 2024-04-22 20:04:35 发布
最新推荐文章于 2024-04-22 20:04:35 发布
阅读量656 收藏 2
点赞数
分类专栏： 小技术 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46498102/article/details/107291032
版权

POSITION

CSS中我们想要改变一个元素的位置，我们可以采用的方法之一就是定位，这也是我们最先接触的方法。其主要用法就是给需要移动的元素的父元素或以上添加 position:relative; 再给自身添加 position:absolute; 然后通过改变方位（top，left，right，bottom）来实现元素的移动。

TRANSFORM

CSS3中提供了transform属性，其中的translateX和translateY值可以实现元素的横向与纵向移动。

区别和选择

经过测试。TRANSFORM性能消耗只有position的十分之一！可想而知，CSS3推出新的transform属性也是加快了浏览器的运行速度。

总结

总的来说，当我们能用transform实现预想的效果就不要去使用position了，一个小小的demo就能达到10倍的差距，可想而知在大型项目中差距会更加明显。

使用transform会比top少一个layout延时

transform的Composite Layers经多次测试 延时普遍会大于top

王噶一啊一
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS居中效果之transform的使用
09-25
`transform`属性在CSS中提供了一种优雅的方式来实现元素的居中效果，而且它的一个特别优势在于，即使内容的高度可变，依然能保持居中状态。本文将详细探讨如何利用`transform`的`translate`函数来实现居中效果，并...
css3 transform导致子元素固定定位变成绝对定位的方法
11-21
本文介绍了css3 transform导致子元素固定定位变成绝对定位的方法，分享给大家，也给我自己留个笔记，方便查找。 <!DOCTYPE html> <html> <head> <style> body { background: #f60; // 橙色 ...
css transform 定位
ECMAtemplate的博客
06-02 123
2. 使用 css transform translate 进行定位，但是这个时候 元素没有脱离文档流，兄弟元素之间会有间隙。这个时候可以是 magin 负边距 进行调整。抵消 translate 的移动位置。1. 相对这个页面，可以实现，但是对头部固定的页面适用，如果调整和响应式 会有影响。当页面出现第一个元素上浮，只是相对 兄弟元素上浮类似 下面UI 稿设计的那样。如上图 蓝色区域，相对 上一个兄弟节点，
transform对定位元素的影响
au48135的博客
06-18 791
1温故知新 absolute：生成绝对定位的元素，相对于除position:static 定位以外的第一个有定位属性的父元素进行定位，若父元素没有定位属性则相对于浏览器窗口的左上角定位，定位的元素不再占据文档的空间。 relative：生成相对定位的元素，相对于其正常位置进行定位,定位的元素仍然占据文档的空间。 2.发现问题 首先看一个代码：a为父元素，b为子...
前端css中的transform(转换)的使用
最新发布
小蜗牛764号的博客
04-22 1346
css中transform的属性虽然有多个，其实弄懂了平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew），后面的那些关于3d效果以及综合变换（如：平移+旋转+缩放等，自由组配）的属性就是这些前面4种效果的延伸和拓展。在3d的效果下/* 保留 3D 效果 */通常要添加，不然程序有些时候达不到预期的3d视图效果，只显示2d状态效果。通常设置于元素的父集中。此外，倾斜通常用于2d状态的变换，对于类似倾斜的3d的效果通常由rotate实现。
css transform定位,css transform（）弹出窗口问题的中心定位
weixin_29348211的博客
08-03 338
HTMLSome headerSome bunch of content etcCSS.__holder {position: fixed;z-index: 15000;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.5);}.__box {position: abso...
前端性能优化-CSS的性能优化：--transform与position的区别、硬件加速工作原理及注意事项
thewar196的博客
05-06 3192
前端性能优化 CSS的性能优化： transform与position的区别 硬件加速工作原理及注意事项
css3中transform对位置的应用
cjsyr_cjsyr的专栏
07-16 989
以前想把一个对象定位在一个父对象的中间时（如下图所示）   以前可能使用的css为top:50%; left:50%; margin-left:-50px;margin-top:-50px;/*需要计算比较麻烦*/ 但是借用css3中的transform可以很方便的实现 top:50%; left:50%; transform:translate(-50% -50%);
CSS定位的教程
09-24
本教程将深入讲解CSS定位的核心知识点，帮助开发者更好地理解和掌握这一技术。 首先，我们要了解的是**文档流**。文档流是HTML元素在页面上自然排列的方式，分为块级元素（block-level elements）和内联元素...
深入解读CSS3中transform变换模型的渲染
01-19
元素设置了transform并不会改变元素所在的文档流，其布局仍然受盒模型支配，因此这里的变换的效果是可以与浮动、定位并存的。 当元素设置了transform后，会为该元素定义一个坐标系，并且在该坐标系内进行矩阵变换，...
css3的transform造成z-index无效解决方案
09-25
总的来说，理解和掌握CSS中的堆叠上下文以及`z-index`的工作原理对于解决这类问题至关重要。在进行复杂的CSS布局设计时，应尽量减少对`transform`的依赖，或者在使用时充分考虑它对堆叠顺序的影响，从而避免类似的...
css transform定位,CSS3 transform:translate属性定位动画演示
weixin_33428129的博客
08-03 408
CSS语言：CSSSCSS确定body {margin: 0;padding: 0;font-family: sans-serif;color: white;}* {transition: all 0.5s ease-in-out;}code {font-family: monospace;font-size: 15px;margin-left: 5px;margin-right: 5px;col...
CSS中定位和transform的比较
Fight_inFourYears的博客
11-13 1085
探讨对象 Position CSS中我们想要改变一个元素的位置，我们可以采用的方法之一就是定位，这也是我们最先接触的方法。其主要用法就是给需要移动的元素的父元素或以上添加position:relative;再给自身添加 position:absolute;然后通过改变方位（top，left，right，bottom）来实现元素的移动。 transform CSS3中提供了transf...
利用css3 transform优雅实现元素定位在屏幕正中央
zhang197093的博客
07-07 9459
通常如果想要实现某个元素定位在屏幕的正中央，比如loading图片，我们是根据元素以及屏幕的大小人为计算，或者使用js，显然这两种方法都不够优雅，或者兼容性不好，这里向大家介绍一种个人认为不错的方案供参考。 代码如下： transform html,body,div,p,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{
CSS小技巧之position和transform
chaocainiao的博客
09-13 601
position 属性指定了元素的定位类型,CSS中常用的定位属性.元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。 transform是css3中的一个特征，可以实现元素的缩放，位移，变形。 属性值： scale：缩放 translate 位移 rotate 旋转 skew 倾斜 此次使用position和transform实现一个旋转的太极图案.
仿京东搜索框
阿豪
03-09 78
原文链接: 仿京东搜索框 上一篇: ...
简单介绍CSS3中的transform的使用方法
前端小伙子的博客
05-27 5976
transform属性分为2D转换和3D转换
深入理解CSS3里的transform变换
buttonChan的博客
05-23 828
transform变换不会影响元素在文档流中的位置 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform是CSS3中实现各种炫酷效果的样式属性，基础的转换函数有缩放scale()、平移translate()。transform对元素在文档流中的盒模型的影响就相当于position:relative，不会改变盒模型，包括大小和位置。 在animation的@...
页面性能优化，如何减少回流
zzyaiaad的博客
09-12 3121
在开发时，不可避免的会遇到性能优化的问题，怎么做性能才会更好。 说到页面性能优化，我们就谈谈两个概念重绘和回流。 1、什么是重绘，什么是回流？ 重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color、color、visibility等，我们将这样的操作称为重绘。 常见的引起重绘 的属性和方法： 回流：当渲染树中的一些元素的几何属性发生变化，例如大小、位置等，而这些属性会影响到布局的操作，这样的操作我们称为回流。 常见引起回
css中的 transform使用方法
07-28
在 CSS 中，transform 属性用于对元素进行变换，可以实现旋转、缩放、平移和倾斜等效果。以下是 transform 属性的使用方法： 1. 旋转（rotate）：使用 rotate() 函数来实现元素的旋转。例如，rotate(45deg) 表示将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值