css transform 定位

当页面出现第一个元素上浮,只是相对 兄弟元素上浮类似 下面UI 稿设计的那样

如上图 蓝色区域,相对 上一个兄弟节点,

分几种情况:

                1. 相对这个页面,可以实现,但是对头部固定的页面适用,如果调整和响应式 会有影响

                 2. 使用 css transform translate 进行定位,但是这个时候 元素没有脱离文档流,兄弟元素之间会有间隙。 这个时候可以是 magin 负边距 进行调整。抵消 translate 的移动位置。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3的`transform`属性是一个非常强大的工具,用于在不改变元素位置和尺寸的情况下,对元素进行各种二维或三维变换,从而实现动画效果、响应式设计以及增强用户体验。`transform`属性支持多种转换类型: 1. **旋转(rotate)**:包括`rotateX()`、`rotateY()`和`rotateZ()`,分别对应于沿X轴、Y轴和Z轴的旋转。 2. **缩放(scale)**:`scale()`用来改变元素的大小,可以接受一维或二维参数,如`scale(2)`会使元素放大两倍,`scale(2, 0.5)`会保持宽度不变而缩小高度。 3. **平移(translate)**:`translate()`移动元素的位置,可以用数值指定水平和垂直方向的位移。 4. **倾斜(skew)**:`skewX()`和`skewY()`分别使元素沿X轴或Y轴倾斜。 5. **矩阵变换(matrix)**:提供更复杂的二维变换,通过一系列系数构建2x2或3x3的矩阵。 6. **透视投影(perspective)**:为子元素创建3D空间中的透视效果,适用于布局元素呈现深度感。 7. **扭曲(transform-origin)**:设置变形中心点,默认在元素中心,可以调整为其他位置。 8. **动画(transition) 和 动效(animation)**:配合`transition`和`@keyframes`规则,可以实现元素从一种状态平滑过渡到另一种状态的动画效果。 应用`transform`时,通常配合百分比单位(例如`%`)或`auto`值以实现响应式布局。同时,为了保持元素的原始尺寸和定位,可以结合`transform-box`属性管理变换行为。使用`transform`时要注意兼容性问题,一些老版本浏览器可能不完全支持某些功能,需要适配处理。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值