css3中translateY、translateX的使用

最新推荐文章于 2022-11-14 10:53:38 发布
最新推荐文章于 2022-11-14 10:53:38 发布
阅读量5.3w 收藏 58
点赞数 18
分类专栏： 前端 文章标签： css3中translateY、translateX的使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40241957/article/details/89465137
版权

1.先说一下translateY()的用法
在这里插入图片描述
效果:
在这里插入图片描述
2.再说一下translateX()的用法
在这里插入图片描述
效果图：
在这里插入图片描述
3.最后再说一下translate(x轴，y轴)的使用;
在这里插入图片描述
效果图：
在这里插入图片描述
margin后面一般会跟4个参数，如margin:1px、1px、1px、1px，分别表示上外边距为1px、右外边距为1px、下外边距为1px、左外边距为1px。

如果后面只写2个参数的话，如margin：1px、2px，则表示上下外边距为都为1px，左右外边距都为2px。

再看一个例子
在这里插入图片描述
此时的效果:
疑问：为什么box2的起点x,y是（0，100），而不是0，0？
答：因为在布局里面，box在box2的前面，而box的宽高都是100px,虽然在“.box”样式里面写了transform:translate(150px,150px),但是这个平移操作不会改变文档流（解释：也就是对box2进行布局的时候，还是把box的位置当成未平移之前的位置），所以box2的起点就是x,y(0,100)紧接在未平移之前的box后面在这里插入图片描述在这里插入图片描述

Java全栈研发大联盟
关注
  • 18
    点赞
  • 踩
  • 58
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
css3实现平移效果(transfrom：translate)的示例
01-18
我们使用translate这个参数来实现移动 translateX:向X轴平移，填正数往右平移，填负数，往左平移 translateY :向Y轴平移，填正数往下平移，填负数，往上平移 translateZ :填的值越大你看到的图像离你感觉越近，天的值越小你看到的图像离你越远 translate同时设置 translateX ，translateY translate(translateX,translateY) 第一个参数是向X轴平移，填正数往右平移，填负数，往左平移 第二个参数是向Y轴平移，填正数往下平移，填负数，往上平移 translate3d 同时设置 translateX ，
CSS3实现网页平滑过渡效果
01-07
@font-face{ font-family:"Raphaelicons"; src:url('fonts/raphaelicons-webfont.eot'); src:url('fonts/raphaelicons-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/raphaelicons-webfont.ttf') format('truetype'), url('fonts/raphaelicons-webfont.woff') format('woff'), url('fonts/raphaelicons-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } html,body,.container,.st-container{ height: 100%; } body{ font-family:Arial,Georgia,serif; background-color: #ddd; font-weight: bold; font-size: 15px; color: #333; overflow: hidden; -webkit-font-smoothing:antialiased; } a{ text-decoration: none; color: #555; } .clr{ width: 0; height: 0; overflow: hidden; clear: both; padding:0; margin:0; } .st-container{ width: 100%; height: 100%; position: absolute;; top:0; left:0; font-family: Arial,"Josefin Slab","Myriad Pro",sans-serif; } .st-container > input,.st-container > a{ width: 20%; height: 40px; line-height: 40px; position:fixed; bottom:0; cursor: pointer; } .st-container > input{ opacity:0; z-index: 1000; } .st-container > a{ z-index: 10; font-weight: 700; font-size: 16px; background-color: #e23a6e; color: #fff; text-align: center; text-shadow:1px 1px 1px rgba(151,24,64,0.2); -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s; } #st-control-1,#st-control-1 + a{ left:0%; } #st-control-2,#st-control-2 + a{ left:20%; } #st-control-3,#st-control-3 + a{ left:40%; } #st-control-4,#st-control-4 + a{ left:60%; } #st-control-5,#st-control-5 + a{ left:80%; } .st-container input:checked + a,.st-container input:checked:hover + a{ background-color: #821134; } .st-container input:checked + a:after{ content: ''; width: 0; height: 0; overflow: hidden; border:20px solid transparent; border-bottom-color:#821134; position: absolute; bottom:100%; left:50%; /*transform:translateX(-50%);*/ margin-left: -20px; } .st-container input:hover + a{ background-color: #ad244f; } /*内容区域*/ .st-scroll, .st-scroll .st-panel{ height: 100%; width: 100%; position: relative; } .st-scroll{ left:0; top:0; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-backface-visibility:hidden; -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; transition:all 0.6s ease-in-out; } .st-panel{ background-color: #fff; overflow: hidden; } .st-color{ background-color: #fa96b5; color: #fff; } #st-control-1:checked ~ .st-scroll{ -webkit-transform:translateY(0%); -moz-transform:translateY(0%); transform:translateY(0%); } #st-control-2:checked ~ .st-scroll{ -webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); transform:translateY(-100%); } #st-control-3:checked ~ .st-scroll{ -webkit-transform:translateY(-200%); -moz-transform:translateY(-200%); transform:translateY(-200%); } #st-control-4:checked ~ .st-scroll{ -webkit-transform:translateY(-300%); -moz-transform:translateY(-300%); transform:translateY(-300%); } #st-control-5:checked ~ .st-scroll{ -webkit-transform:translateY(-400%); -moz-transform:translateY(-400%); transform:translateY(-400%); } .st-desc{ width: 200px; height: 200px; background-color: #fa96b5; position: absolute; left:50%; top:0; margin-left: -100px; -webkit-transform:translateY(-50%) rotate(45deg); -moz-transform:translateY(-50%) rotate(45deg); transform:translateY(-50%) rotate(45deg); } .st-color .st-desc{ background-color: #fff; } [data-icon]:after{ content: attr(data-icon); width: 200px; height: 200px; color: #fff; font-size: 90px; text-align: center; line-height: 200px; position: absolute; left: 50%; top:50%; margin: -100px 0 0 -100px; -webkit-transform:rotate(-45deg) translateY(25%); -moz-transform:rotate(-45deg) translateY(25%); transform:rotate(-45deg) translateY(25%); font-family:"Raphaelicons"; text-shadow:1px 1px 1px rgba(151,24,64,0.2); } .st-color [data-icon]:after{ color: #fa96b5; text-shadow:1px 1px 1px rgba(0,0,0,0.1); } .st-panel h2{ color: #e23a6e; font-size: 54px; line-height: 50px; text-align: center; font-weight: 900; width: 80%; position: absolute; left:10%; top:150px; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); -webkit-backface-visibility:hidden; } .st-color h2{ color: #fff; text-shadow:1px 1px 1px rgba(0,0,0,0.1); } #st-control-1:checked ~ .st-scroll #st-panel-1 h2, #st-control-2:checked ~ .st-scroll #st-panel-2 h2, #st-control-3:checked ~ .st-scroll #st-panel-3 h2, #st-control-4:checked ~ .st-scroll #st-panel-4 h2, #st-control-5:checked ~ .st-scroll #st-panel-5 h2{ -webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards; -moz-animation:moveDown 0.6s ease-in-out 0.2s backwards; -o-animation:moveDown 0.6s ease-in-out 0.2s backwards; -ms-animation:moveDown 0.6s ease-in-out 0.2s backwards; animation:moveDown 0.6s ease-in-out 0.2s backwards; } @-webkit-keyframes moveDown{ 0%{ -webkit-transform:translateY(-40px); opacity:0; } 100%{ -webkit-transform:translateY(0px); opacity:1; } } @-moz-keyframes moveDown{ 0%{ -moz-transform:translateY(-40px); opacity:0; } 100%{ -moz-transform:translateY(0px); opacity:1; } } @-o-keyframes moveDown{ 0%{ -o-transform:translateY(-40px); opacity:0; } 100%{ -o-transform:translateY(0px); opacity:1; } } @-ms-keyframes moveDown{ 0%{ -ms-transform:translateY(-40px); opacity:0; } 100%{ -ms-transform:translateY(0px); opacity:1; } } @keyframes moveDown{ 0%{ transform:translateY(-40px); opacity:0; } 100%{ transform:translateY(0px); opacity:1; } } .st-panel p{ font-size: 25px; color: #8b8b8b; line-height: 1.8; text-align: left; text-indent: 2em; font-weight: 700; width: 70%; position: absolute; left:15%; top:280px; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); -webkit-backface-visibility:hidden; } .st-color p{ color:rgba(255,255,255,0.8); text-shadow:1px 1px 1px rgba(0,0,0,0.1); } #st-control-1:checked ~ .st-scroll #st-panel-1 p, #st-control-2:checked ~ .st-scroll #st-panel-2 p, #st-control-3:checked ~ .st-scroll #st-panel-3 p, #st-control-4:checked ~ .st-scroll #st-panel-4 p, #st-control-5:checked ~ .st-scroll #st-panel-5 p{ -webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards; -moz-animation:moveUp 0.6s ease-in-out 0.2s backwards; -o-animation:moveUp 0.6s ease-in-out 0.2s backwards; -ms-animation:moveUp 0.6s ease-in-out 0.2s backwards; animation:moveUp 0.6s ease-in-out 0.2s backwards; } @-webkit-keyframes moveUp{ 0%{ -webkit-transform:translateY(40px); opacity:0; } 100%{ -webkit-transform:translateY(0px); opacity:1; } } @-moz-keyframes moveUp{ 0%{ -moz-transform:translateY(40px); opacity:0; } 100%{ -moz-transform:translateY(0px); opacity:1; } } @-o-keyframes moveUp{ 0%{ -o-transform:translateY(40px); opacity:0; } 100%{ -o-transform:translateY(0px); opacity:1; } } @-ms-keyframes moveUp{ 0%{ -ms-transform:translateY(40px); opacity:0; } 100%{ -ms-transform:translateY(0px); opacity:1; } } @keyframes moveUp{ 0%{ transform:translateY(40px); opacity:0; } 100%{ transform:translateY(0px); opacity:1; } } @media screen and (max-width:520px){ .st-panel h2{ font-size: 42px; } .st-panel p{ font-size: 18px; width: 90%; left:5%; top:240px; } .st-container > a{ font-size: 13px; } .st-desc{ width: 160px; height:160px; margin-left: -80px; } [data-icon]:after{ font-size: 75px; -webkit-transform:rotate(-45deg) translateY(20%); -moz-transform:rotate(-45deg) translateY(20%); transform:rotate(-45deg) translateY(20%); } } @media screen and (max-width:360px){ .st-panel h2{ font-size: 42px; } .st-panel p{ font-size: 18px; width: 90%; left:5%; top:240px; } .st-container > a{ font-size: 10px; } .st-desc{ width: 120px; height:120px; margin-left: -60px; } [data-icon]:after{ font-size: 60px; -webkit-transform:rotate(-45deg) translateY(15%); -moz-transform:rotate(-45deg) translateY(15%); transform:rotate(-45deg) translateY(15%); } }
transform: translateY(-100%)偏移实现上滑隐藏导航栏
热门推荐
魏少
07-03 2万+
transform:translateY(100%) 语法： Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。 语法： transform ： none ; 也就是： tran...
变形--位移 translate()
09-27 862
translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅
css3动画属性系列之transform细讲移动translate
Focus-Fe
02-20 1407
上一篇讲了rotate，这一次我们再细讲一下translate   下面我们从3个方面开始介绍：   1、translate(x,y)  水平方向和垂直方向同时移动，    取值x表示x轴过渡值  取值y表示y轴过渡值  ----如果没有赋值，默认是0  默认以元素的中心点为基点，可以通过transform-origin进行基点的设置  x,y如果为负就反方向移动 tr...
CSS3转换属性—transform之translate、rotate、scale函数详解
青春木鱼的博客
11-14 1万+
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜、透视等。其中，skew(倾斜)，perspective（透视）不常使用。transform是css3新增的属性，在IE9及以下的浏览器会出现兼容问题，所以要慎用！
translateX
YW博客
09-09 2928
translateX是相对于元素最开始位置进行移动的，不是元素的新位置 <script> var div = document.querySelector('div'); div.style.transform = 'translateX(100px)'; div.style.transform = 'translateX(50px)'; </script> 可以看到元素移动的事50px,而不是150px ...
在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...
css 平移到某个位置_CSS3 对象平移translate()translatex()translatey()应用实例，包括水平垂直居中...
weixin_39923262的博客
12-21 1769
CSS3新增了制作动画功能，既然是动画就少不了移动，因此平移属性translate随之增加。translate主要用于控制对象的移动，它又可分为translatex()和translatey()，前者控制对象沿X轴移动，后者控制对象沿Y轴移动，translate既可控制对象沿X轴移动又可控制对象沿Y轴移动，当然也能控件对象同时沿X和Y移动。translate相对来说是transform中比较简单的...
固定定位居中translateX(-50%)
快乐de馒头
12-30 1441
translateX(-50%) 如果是百分比的话那么就是移动盒子自身宽度的-50% 还有一种方法就是不写left:50%,不写translateX(-50%) ，最终默认也会居中对齐
es6-flex-masonry-grid:非常轻巧的ES6模块，用于在基于柔性的砖石布局中显示项目，而无需第三方依赖性。 网格布局使用CSS flexbox功能。 没有绝对定位。 偏移量是通过CSS转换样式（translateY）实现的
04-04
ES6 Flex砌体网格 ES6模块，用于在基于柔性的砌体布局中显示项目，而没有第三方依赖性。 网格布局仅使用css flexbox功能。 与众所周知的砌体布局相反，没有绝对的定位，这使其可用于各种CSS框架。 使用简单的转换样式（translateY）计算距离。 安装 npm install @offensichtbar-codestock/es6-flex-masonry-grid --save 用法 进口 作为npm包 将OSB_MasonryGrid导入脚本中： import OSB_MasonryGrid from ' @offensichtbar-codestock/es6-flex-masonry-grid ' ; 作为链接 从git repo下载bundle.min.js并使用脚本标签在html中链接 < script type= " text/javascript
随手记——css3 2D转换（transform）
01-08
css3 2D转换（transform） 位移（translate） 旋转（rotate） 转换中心点（transform-origin） 缩放（scale） 2D转换综合写法 正文 __start： 位移（translate） 语法 说明 transform:translate(x,y) 元素在x轴移动x像素，y轴移动y像素 transform:translateX(n) 元素在x轴移动n像素 transform:translateY(n) 元素在y轴移动n像素 注： X和Y代表的二维坐标； 里面的参数可用百分比，也可用像素； 参数用百分比时，移动的距离是利用盒子
CSS3 分类菜单效果
12-13
CSS3 分类菜单效果如下所述： HTML <html> <head> <title></title> <style type="text/css"> #bg { width: 1270px; height: 751px; margin: 0 auto; background: url("images/bg.jpg") no-repeat; } .sblock { width: 800px; height: 250px; margin: 0 auto;} /*.sblock { transform:translateY(65%
css3实现多个元素依次显示效果
01-19
具体的动画，在keyframes中定义，在animation中使用。例如可以定义一个从上飞入的动画效果。 @keyframes topIn { from { transform: translateY(-50px) } to { transform: translateY(0px) } } 并在目标元素中...
CSS3 translate导致字体模糊的实例代码
12-10
今日客户反馈，发现 使用了 translate会导致字体模糊。 .media-body-box{ @media all and (min-width: 992px){ position: absolute;...为了垂直居中，使用了 transform: translateY(-50%) 和 top:50% ，
CSS基础学习总结（1）
JavaAlliance
05-22 5363
CSS基础学习总结（1） 一、引入CSS样式表（书写位置） 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head&g...
cnpm的使用
JavaAlliance
03-29 4455
1、安装cnpm，输入以下命令： npm install -g cnpm --registry=https://registry.npm.taobao.org 如下图： 2、输入cnpm -v ，检测是否正常，但是这里会报错。 3、添加系统变量path的内容 因为cnpm会被安装到D:\Develop\nodejs\node_global下（注意：node.js当初被安装到D:\Develop...
前端JSON处理
JavaAlliance
05-30 3013
JSON 解析与序列化 JSON 内置了两种方法： JSON.parse() ：将数据转换为 JavaScript 对象。 JSON.stringify() ：将 JavaScript 对象转换为字符串。 1. JSON.parse() JSON.parse() 的语法如下： JSON.parse(text, reviver) text： 必需， 一个有效的 JSON 字符串。 reviver：可选，一个转换结果的函数， 将为对象的每个成员调用此函数。 const json = '{"name":
css中的transform如何使用
最新发布
05-16
CSS中的transform属性可以用来对元素进行旋转、缩放、倾斜、移动等变换操作。它的语法如下： ``` transform: none|transform-functioninitial|inherit; ``` 其中transform-function是指变换函数，可以是以下的其中一种或多种组合： 1. translate()：移动元素，可以是translateX()、translateY()、translateZ()或translate3d()。 2. rotate()：旋转元素，可以是rotateX()、rotateY()、rotateZ()或rotate3d()。 3. scale()：缩放元素，可以是scaleX()、scaleY()、scaleZ()或scale3d()。 4. skew()：倾斜元素，可以是skewX()、skewY()。 5. matrix()：定义一个2D变换，可以使用matrix3d()定义一个3D变换。 例如，下面的代码将一个元素向右平移50像素，向下平移20像素： ```css transform: translate(50px, 20px); ``` 还可以使用多个变换函数组合起来，实现更复杂的变换效果。例如，下面的代码将一个元素向右平移50像素，同时沿X轴旋转30度： ```css transform: translateX(50px) rotateX(30deg); ``` 需要注意的是，transform属性不会影响元素的布局，只会改变元素的视觉表现。因此，使用transform属性时需要注意兼容性，并且在实现一些特殊效果时需要考虑到元素的父元素和兄弟元素的影响。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java全栈研发大联盟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值