Transform:transform:translateX/Y(**px)；

最新推荐文章于 2023-01-17 16:31:33 发布
最新推荐文章于 2023-01-17 16:31:33 发布
阅读量1.5k 收藏 2
点赞数
文章标签： css css3 javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55086241/article/details/113851952
版权

transform:translateX()

今天演示transform里面 translateX()位移的属性
下面是已经完成的一个小案例，我们可以看到这个类似按钮的开关健的效果。
我们通过 transform：translateX（）就可以完成这个效果
在这里插入图片描述

我们用个伪类，在伪类中去设置 translateX 并给它设置了150px像素，这样就可以完成鼠标放上去就会向右位移的效果，当给的数值是负数时就会向左移动，我们还可以设置 translateY（）上下位移，也可以设置 translateXY（150px， 150px）水平与垂直方向同时移动
在这里插入图片描述

weixin_55086241
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
变换（transform）——移动（translate）、旋转（rotate）、缩放（scale）、扭曲（skew）、基点变换（transform-origin）、动画（animation）
ranran0306的博客
03-17 5715
变换（transform）——移动（translate）、旋转（rotate）、缩放（scale）、扭曲（skew）、基点变换（transform-origin）、动画（animation）
Transform-Css:将 Css 变换转换为 Js，获取 translatescalerotate 的当前变换
06-16
转换-CSS 通过平移/缩放/旋转操作将 Css 转换为对象。 不需要deps。 要使用此库，您需要将 Css 添加到 $.css 或 el.style。...// stringvar obj = 'transform: translateX(10px) translateY(10px)' ;方法 ： var transf
tween-css-transform:补间 CSS 转换 (matrix3d)
07-02
tween-css-transform 使用 CSS matrix3d()和 4x4 矩阵插值（分解/重组）对 DOM 元素进行matrix3d() 。 这允许平滑范围的 3D 旋转（使用四元数和球面插值）而无需万向节锁定。 通常与或。 例子： var tweenr = require ( 'tweenr' ) ( ) var Transform = require ( 'tween-css-transform' ) //you can specify transform strings var tween1 = Transform ( element , { duration : 1 , delay : 0.5 , ease : 'expoOut' , start : 'translateX(10px) rotateX(90deg)' e
在css中translate表示,css中位移translate()如何使用？translate用法总结
weixin_31845811的博客
08-04 1万+
css3中translate用法是怎么样的？css中位移translate()如何使用？这些可能一些新手学习css所遇到的问题，接下来我们就来讲解一下css中位移translate()如何使用？一：translate()用法在css样式中，很多人都喜欢使用translate()来表示位移，可以使用translate()中的x和y来表示元素在水平方向或者垂直方向上移动。例如：1.translateY...
CSS3转换属性—transform之translate、rotate、scale函数详解
青春木鱼的博客
11-14 1万+
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜、透视等。其中，skew(倾斜)，perspective（透视）不常使用。transform是css3新增的属性，在IE9及以下的浏览器会出现兼容问题，所以要慎用！
css - 变形位移 translate的使用
m0_64000192的博客
07-31 1384
css-translate的使用
transform的基本使用和常用特效
qq_61943848的博客
08-11 4222
先介绍2D转换的transform的基本使用：移动：translate、旋转：rotate、缩放：scale。可分为2D转换的transform和3D转换transform的使用，可以实现元素的移动、旋转、收缩等效果。transform：translate() rotate() scale()有位移先写位移，空格隔开。ranslate最大的优点就是不会影响其他元素 ，不像边距和定位会影响，但对行内元素无效。rotate鼠标滑过翻转效果。用rotate做个三角形箭头。三、2D转换之： 缩放。......
transform中的translateX/Y/Z与rotateX/Y()的使用
MuLinxi的博客
05-03 7063
学习过程中发现tranform里的rotate在X与Y的使用上弄不明白,自己琢磨了一会儿，并发布在此，如有错误，还望斧正，希望能帮到大家 一：transform后的translate()与rotate()是有先后顺序的 以一个立方体为例来说,前粉 后蓝 左绿 右黄 上橙 下蓝 这是已经实现好的立方体，又加了一个带有代码opacity：0.5的立方体，方便观看 现在将其变换为实现之前 这是上下左右前后六个面重叠在一起的样子，接下来进行移动和旋转 前/fronttransform: translateZ(
CSS3变形
m0_72943141的博客
07-28 1341
CSS3变形是一些效果的集合 平移 transform: translate(100px,100px); 旋转 transform: rotate(30deg); 缩放 transform: scale(2); 倾斜 transform: skew(5deg,5deg);
用 transform: translateX()； 来替换 left的好处
weixin_45352819的博客
11-03 5845
用 transform: translateX(); 来替换 left 来实现位移有什么好处？ 不会使页面造成重绘或者回流，当动画修改一个元素的 left 和 top会改变它的形状，而且可能引起页面上其它元素的移动和形状改变，会引起页面的重绘和回流 什么是重绘和回流？ 重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。 重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程
transform三大属性 rotate、scale、translate
weixin_44167504的博客
09-05 1万+
transform三大属性 transform三大属性：rotate(旋转) scale(缩放) translate(移动) 其他属性：skew(扭曲) matrix(矩阵变形) 语法：transform：rotate | scale | skew | translate |matrix; 一. 旋转rotate rotate(angle)定义2D旋转 rotateX(angle) rotateY(angle) rotateZ(angle) rotate3d(angle)定义3d旋转 二.
浅谈javascript获取元素transform参数
12-04
body{-webkit-transform: translateX(20px);} 但当我尝试这样做的时候，奇迹出现了： 当时我的内心几乎是崩溃的，我只想安安静静的获取translate的值而已啊，谁知给我弹出这货，虽然上高数课的时候也有讲到所有...
trender:批量 css 过渡结束事件
06-15
-webkit-transform : translateX ( 0 ); -moz-transform : translateX ( 0 ); transform : translateX ( 0 ); -webkit-transition : -webkit-transform 380 ms cubic-bezier ( 0.175 , 0.885 , 0.320 , 1.275 ) , ...
实现情人节动态爱心效果（附代码h5+css+js）
05-20
<!... <title>3daixin</title> ... oDiv.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translateX(30px)"; heart3d.appendChild(oDiv);//往它里面添加子元素 } </script> </body> </html>
css内置的一个函数可与transform属性配合使用
wang5133006的博客
09-23 393
translate的意思为“移动”，是css内置的一个函数，与transform属性配合使用，可以将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。x表示元素在水平方向（X轴）的移动距离，当x为正时，表示元素在水平方向向右移动（X轴正方向）；在CSS中，translate()方法与transform属性配合使用，可以将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。y表示元素在水平方向（y轴）的移动距离，当y为正时，表示元素在垂直方向向下移动；translateX(x)：元素仅在水平方向移动（X轴移动）；
【前端学习】前端学习第八天：transform变形平移使用方法及立方体3D动画效果完整版
qq_49916504的博客
03-19 2073
通过使用transform对元素进行变形等相关操作，可以使元素的效果更加生动，下面就来介绍一下transform具体的一些属性。 1、平移 translate translateX（）：沿着x轴方向平移； translateY（）：沿着y轴方向平移； translateZ（）：沿着z轴方向平移。 其中，有两个特殊值： translateX（-50%）：水平居中； translateY（-50%）：垂直居中； 二、旋转 rotate rotateX（）：沿着x轴方向旋转； rotateY（
详解transform:translate(-50%,-50%)
热门推荐
qq_41083105的博客
03-26 3万+
关于transform:translate(-50%,-50%) 这个其实就是一个位移的属性，translatex在x轴方向上进行移动，反之translatey实在y轴方向，而translate括号里的两个参数是先x后y的。 这句话的应用场景是实现块居中，具体实现如下： <style> .outer { width: 300px; height: 300px; posit...
Transform的属性及使用
小谭鸡米花的博客
10-23 3万+
前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、transform是什么？ Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 二、transform的属性值 假如有一个盒子，高度两百像素，宽度两百像素，设置一个背景颜色，下面来用这个盒子来观察transform每个属性值的效..
transform三大属性
SongdanDab的博客
01-17 767
transform 的三大属性
.right{ background: url(~@/assets/dataJudged/bgc/[email protected]) no-repeat; background-size: 100% 100%; height: calc(100vh - 173px); overflow-x: auto; padding: 96px 44px 20px 31px; position: relative; .remCase{ /* position: fixed; */ /* top: 11%; right: 8.9%; width: 211px; height: 21px; */ position: absolute; top: 12px; left: 33%; transform: translateX(-50%);通过这个固定到我需要的位置上了，但是我一上下滚动他就脱离背景了
最新发布
06-10
这可能是由于你使用了 `position: absolute`，该元素会相对于其最近的定位祖先元素进行定位，如果没有定位祖先元素，则相对于文档的 body 元素进行定位。如果你的父元素也是 `position: absolute` 或 `position: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值