120_x轴与y轴平移【transform: translateX(n) translateY(n)】利用定位和变形使元素水平垂直居中

VIP文章 已于 2022-06-16 10:50:25 修改
阅读量481 收藏
点赞数
分类专栏： HTML CSS 基础 文章标签： css
于 2021-08-26 20:03:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gty204625782/article/details/119939005
版权

变形就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局。
transform 用来设置元素的变形效果

平移（百分比是相对于自身计算的）：

  • translateX() 沿着x轴方向平移
  • translateY() 沿着y轴方向平移

以前，在元素宽高确定且开启了定位时，可以用left: 0; right: 0; top: 0; bottom: 0; margin: auto;使得元素水平垂直居中，但是很不方便，因为要使等式成立，现在有了变形，则可以利用平移自身的百分比来使得元素水平和垂直居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Css3 ---- transform平移
Cg_Companion_Xi的博客
04-25 2309
transform的用法： transform：translate（x轴平移，y轴平移）; 也可以单独设置：transform：translateX（）; transform：translateY（）。如果只设置transform：translate（值），那么只会在X轴进行平移。值可以取负数。 也可以设置为 translateZ(); 但是需要 配合旋转，效果才比较明显。 代码： <!...
css3转换（transform属性---rotate() / translateX() / translateY() / translate(x,y) / scaleX()...）
拾Miss~博客
04-17 3789
目录 Transform（变形）属性 2D转换 rotate() 旋转 translate() 平移 scale() 缩放 skew() 扭曲/斜切 3D转换 rotate3d() translate3d()---增加了z轴方向平移 scale3d()---增加了z轴方向缩放 transform 与 坐标系统 css3矩阵 css3扩展属性 transfo...
transform中的translateX/Y/Z与rotateX/Y()的使用
MuLinxi的博客
05-03 7070
学习过程中发现tranform里的rotate在X与Y的使用上弄不明白,自己琢磨了一会儿，并发布在此，如有错误，还望斧正，希望能帮到大家 一：transform后的translate()与rotate()是有先后顺序的 以一个立方体为例来说,前粉 后蓝 左绿 右黄 上橙 下蓝 这是已经实现好的立方体，又加了一个带有代码opacity：0.5的立方体，方便观看 现在将其变换为实现之前 这是上下左右前后六个面重叠在一起的样子，接下来进行移动和旋转 前/fronttransform: translateZ(
简单c#编写uinty的实现---控制物体沿某个物体某个轴旋转,定点移动,如何判断两点间直线距离
weixin_44856491的博客
07-09 672
如何获取场景中游戏的信息 方式1通过名字或者tag值找到该物体 在获取该物体上身上的组件 GameObject sp; void Awake() { sp=GameObject.Find("sphere"); //sp = GameObject.FindWithTag("sp"); } 方式2直接通过连线的方式关联—比较简单 直接将sphere,拖到cube的tag上即可 ...
【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-21 3670
一、CSS3 2D 转换 - 位移 / 旋转 / 缩放 二、CSS 2D 转换 - Translate 移动 三、Translate 移动代码示例 1、基本示例 2、脱标测试 ( 百分比平移 ) 四、Translate 百分比移动实现绝对定位的居中效果 1、传统实现方式代码示例 2、百分比移动实现绝对定位的居中效果代码示例
css 平移到某个位置_CSS3 对象平移translate()translatex()translatey()应用实例，包括水平垂直居中...
weixin_39923262的博客
12-21 1853
CSS3新增了制作动画功能，既然是动画就少不了移动，因此平移属性translate随之增加。translate主要用于控制对象的移动，它又可分为translatex()和translatey()，前者控制对象沿X轴移动，后者控制对象沿Y轴移动，translate既可控制对象沿X轴移动又可控制对象沿Y轴移动，当然也能控件对象同时沿X和Y移动。translate相对来说是transform中比较简单的...
关于transform:translate(-50%,-50%)实现水平垂直居中
玲曦的博客
09-07 808
当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置， translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高（负自身已知宽高的一半），而translate可以在不知道宽高的情况下进行居中，tra...
transform:translate(-50%,-50%)水平垂直居中效果
vicky_yongqi的博客
12-02 4750
transform: translateY(-50%) 实现元素垂直居中效果 transform:translate(-50%,-50%)实现水平垂直居中 通过position absolute和top 50%，结合transform产生效果。 eg.头部CSS排版 <style lang="stylus" rel="stylesheet/stylus"> .top_contai...
【前端学习】前端学习第八天：transform变形平移使用方法及立方体3D动画效果完整版
qq_49916504的博客
03-19 2076
通过使用transform对元素进行变形等相关操作，可以使元素的效果更加生动，下面就来介绍一下transform具体的一些属性。 1、平移 translate translateX（）：沿着x轴方向平移； translateY（）：沿着y轴方向平移； translateZ（）：沿着z轴方向平移。 其中，有两个特殊值： translateX（-50%）：水平居中； translateY（-50%）：垂直居中； 二、旋转 rotate rotateX（）：沿着x轴方向旋转； rotateY（
jquery.css-transform:用于变换操作和动画支持的轻量级 jQuery 插件
06-05
2D 变换： translateX 、 translateY 、 scaleX 、 scaleY 、 skewX 、 skewY 、 rotate 3D变换：translateZ，scaleZ，rotateX，旋转Y，rotateZ，透视 用法 这个插件安装了一个 ，它允许 jQuery 的和设置和动画...
css3实现平移效果(transfrom：translate)的示例
01-18
translateX:向X轴平移，填正数往右平移，填负数，往左平移 translateY :向Y轴平移，填正数往下平移，填负数，往上平移 translateZ :填的值越大你看到的图像离你感觉越近，天的值越小你看到的图像离你越远 ...
CSS居中大礼包
01-08
**CSS居中大礼包** 水平居中 行内元素&行内块元素：看父元素是不是...使用定位元素，父元素是相对定位，子元素(假如宽度是100px)是绝对定位 子 元素设置 left:50%; margin-left:-50px; 或者transform:translateX(-50
tween-css-transform:补间 CSS 转换 (matrix3d)
07-02
使用 CSS matrix3d()和 4x4 矩阵插值（分解/重组）对 DOM 元素进行matrix3d() 。 这允许平滑范围的 3D 旋转（使用四元数和球面插值）而无需万向节锁定。 通常与或。 例子： var tweenr = require ( 'tweenr' ) ...
浅谈javascript获取元素transform参数
12-04
之前写页面的时候有试过想用js获取某些元素的translate的数值什么的，但是translate又是transform的子样式（勉强说说），理所当然就是先获取transform样式，再读里面的值。 代码如下: body{-webkit-transform: ...
CSS学习笔记之高级教程（一）
最新发布
wz_1992的博客
05-22 875
1、圆角：border-radius border-radius 属性可以接受一到四个值。规则如下： 四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角） 三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角） 两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）
css卡片横线100%宽度
m0_46554818的博客
05-22 253
【代码】css卡片横线100%宽度。
【CSS】媒体（媒介 / media）查询
小秀的博客
05-22 409
媒体查询（Media Queries）是 CSS3 中引入的一种技术，用于根据设备的特性和属性，为不同的媒体类型提供不同的样式规则。媒体查询使得我们可以根据设备的屏幕尺寸、分辨率、屏幕方向、设备类型等条件来适应不同的设备和媒体类型。表示媒体类型，比如screen（屏幕）、print（打印）等，而是媒体特性，比如width（宽度）、height（高度）、（方向）等。未指明类型为默认值 all。
vue-cli2项目中使用scss
Hi_MrXiao的博客
05-21 471
首先要搞清楚Sass和Scss的区别：实际上Sass和Scss是同一种东西，Scss是 Sass3 引入新的语法，它们都是css预处理器。：Sass 默认使用“.sass”作为文件扩展名，而 Scss 使用“.scss”作为扩展名。：Sass 最初是以严格的缩进式语法规则来书写，不带大括号和分号，这种方式使得代码更加简洁，但在某些情况下可能不如Scss直观易读；相比之下，Scss的语法允许使用大括号和分号，与常规的 css语法相似，这使得 Scss更容易被 css开发者接受和使用。
标签绑定样式 transform:translateX
06-13
transform:translateX()是CSS3新增的一个属性，它可以让元素在水平方向上移动指定的距离。其中，translateX()函数的参数可以是一个长度值或百分比值，也可以是一个计算表达式。例如： ``` div { transform: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值