在css中translate表示,css中位移translate()如何使用?translate用法总结
css3中translate用法是怎么样的?css中位移translate()如何使用?这些可能一些新手学习css所遇到的问题,接下来我们就来讲解一下css中位移translate()如何使用?
一:translate()用法
在css样式中,很多人都喜欢使用translate()来表示位移,可以使用translate()中的x和y来表示元素在水平方向或者垂直方向上移动。
例如:1.translateY(y):表示该元素在垂直方向上移动,也就是我们所说的y轴
2.translateX(x):表示该元素在水平方向上移动,也就是我们所说的x轴
二:translate()语法transform:translateX(x);或者transform:translateY(y);
在css3中,transform属性的变形方法都是属于transform,并且要加上transform,从而表示变形处理,元素在水平方向中移动的距离的单位用px和百分比表示,当x出现正值的时候,表示元素在水平方向右有移动,当x为负值的时候,表示该元素向左移动,
例如:
CSS3位移translate()方法
/*设置原始元素样式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:translateX(50px);
-webkit-transform:translateX(20px); /*兼容-webkit-引擎浏览器*/
-moz-transform:translateX(20px); /*兼容-moz-引擎浏览器*/
}
效果如下:
总结:transform:translateX(50px)说明在水平方向上移动50px,这时候我们如果我们把50px改成-50px,该元素就在水平方向相反的方向移动50px。
translate(y)的用法:
translate(y)的用法和translate(x)的用法很相似,x是在水平方向上移动,y是在垂直方向上移动,当
y出现正值的时候,说明该元素在向下移动,如果出现负值,说明是向上移动,和我们的正常思维相反。
translate(x,y)的混合使用:
表示元素在x中水平方向上移动,这里需要注意的是,y值是一个参数,没有设置y的值话,可能表示元素在x轴移动,其实单纯的使用translate()是没有太多的意义,我们可以结合css使用。
以上就是对css中位移translate()如何使用?translate用法总结的全部介绍,如果你想了解更多有关CSS视频教程,请关注Gxl网。
在css中translate表示,css中位移translate()如何使用?translate用法总结相关推荐
- 在SCSS文件中导入常规CSS文件?
本文翻译自:Import regular CSS file in SCSS file? Is there anyway to import a regular CSS file with Sass's ...
- css如何实现让div中的多行文字居中显示
标题css如何实现让div中的多行文字居中显示 最近在做项目的时候遇到一个div中有多行文字(可能一行也可能多行)需要实现居中显示,试了好多方法都不行,显然不能使用padding来居中,因为文字有多少 ...
- 失业潮中不得不看CSS知识点(巨详细)
一.高度塌陷 描述 当父元素未设置高度时,所有子元素浮动后,造成子元素脱离文档流进而无法把父元素撑开,父元素高度为0产生高度塌陷,称为高度塌陷问题. 解决的办法 给父元素添加声明:overflow ...
- SEO中的DIV CSS样式的命名规则
在搜索引擎优化中,对于代码的优化是一个非常重要的部分. 如果一个网页的代码非常的简捷,对于提升网站的排名那个是非常有好处的. 同样, 在CSS样式表中,合理有序的命名同样可以为整个CSS工作带来意想不 ...
- 怎么在html中加判断,css样式里面如何做判断
CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包 ...
- java css_JavaWeb中基本的CSS的使用
动图CSS:页面美化和布局控制 一. 概念: Cascading Style Sheets 层叠样式表 * 层叠:多个样式可以作用在同一个html的元素上,同时生效 二. 好处: 1. 功能强大 2. ...
- Eclipse中写jsp文件时,发现里面加载不了js文件和css文件(解决css文件在eclipse中显示不了)
今天在做项目的时候,在项目中新建jsp文件和js文件和css文件,启动服务器,访问页面,加载不到js文件和css文件:(文件存在) jsp文件部分代码如下: <link rel="st ...
- 网页css样式中英对照,css中文样式(含中英文对照表).doc
css中文样式(含中英文对照表) CSS学习网站: /css/css_reference.asp / /thread-265-1-1.html 1.[类型]主要针对网页中的文本 [背景]是在网页的元素 ...
- css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title><meta ...
- css设置title字体_CSS中简写属性要注意TRouBLe的顺序,避免踩坑
简写属性是用于同时给多个属性赋值的属性.比如font是一个简写属性,可以用于设置多种字体属性.它指定了font-style.font-weight.font-size.font-height以及fon ...
最新文章
- 我眼中的DevOps(转)
- [POI 2009] gas 贪心
- VTK:PolyData之DijkstraGraphGeodesicPath
- vue router返回上一页
- 主题:ioctl函数详细说明
- 0817JavaScript--------------循环语句
- myeclipse中加入jad查看jar源代码
- 24.两两交换链表中的节点
- idea 使用中文汉化包教程
- 基于MTCNN+arcface的人脸检测和人脸识别
- Win11 如何跳过微软注册界面
- 高级架构师备考经验分享
- for循环特殊的写法
- html毕业设计任务要求,毕业设计任务及进度安排|毕业设计进度安排
- 程序员裸辞,利用1个月时间全力找工作,怎么样?
- Gradle 4.4 版本 百度云网盘地址(永久有效)
- 今日头条如何快速开通原创
- 开源项目——寝室助手
- 【智能车新手入门】-赛车行驶策略
- transmac使用方法_如何使用TransMac制作Mac启动盘?TransMac使用说明
热门文章
- 超大水箱持久水润,让这个冬天不干燥,摩飞有雾加湿器体验
- [深入研究4G/5G/6G专题-58]: - L3信令控制-7-关键概念和常见问题之信道、UE 上下文, RRC连接,SRB0/1/2, DRB Bear。
- 动态SQL之、条件判断(转)
- 阿里NASA计划“亮剑”:谢崇进和他追求的科学极限
- 访谈完100个年入百万的自媒体人后,我总结了出了他们的共性
- 自娱自乐的FreeRTOS——config.h配置文件详解
- Failed to resolve:问题的解决方法
- 利用shell脚本,实现腾讯云DNSPod进行DDNS动态域名解析ipv6地址
- python subprocess.Popen 监控控制台输出
- ollydbg使用心得