css 平移到某个位置_平移:translate() - CSS3 | 绿叶学习网
在CSS3中,我们可以使用transform属性的translate()方法来实现元素的平移效果。
语法:
transform: translateX(x); /*沿X轴方向平移*/
transform: translateY(y); /*沿Y轴方向平移*/
transform: translate(x, y); /*沿X轴和Y轴同时平移*/
说明:
从上面可以看出,平移有3种情况: translateX()、translateY()、translate()。参数x表示元素在x轴方向上的移动距离,参数y表示元素在y轴方向上的移动距离,两者的单位可以为px、em和百分比等。
注意,所有的CSS3变形采用的坐标系都是W3C坐标系。对于W3C坐标系,我们在“15.2 文本阴影”这一节已经详细介绍过了。
举例:translateX(x)
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:translateX(20px);
}
浏览器预览效果如下图所示。
分析:
transform:translateX(20px);表示元素在x轴方向向右平移20px。如果把20px改为-20px,则元素会在x轴方向向左平移20px,此时浏览器预览效果如下图所示。
实际上,transform:translateX(20px);其实可以等价于transform:translate(20px, 0);,小伙伴们可以自行测试一下。
举例:translateY(y)
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:translateY(20px);
}
浏览器预览效果如下图所示。
分析:
transform:translateY(20px);表示元素在y轴方向向下平移20px。如果把20px改为-20px,则元素会在y轴方向向上平移20px,此时浏览器预览效果如下图所示。
实际上,transform:translateY(20px);其实可以等价于transform:translate(0, 20px);,小伙伴们可以自行测试一下。
举例:translate(x, y)
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:translate(20px, 40px);
}
浏览器预览效果如下图所示。
分析:
transform:translate(20px, 40px);表示元素在x轴和y轴两个方向上同时平移,其中x轴方向平移20px,y轴方向平移40px。实际上,transform:translate(20px, 40px);可以等价于以下代码:
transform:translateX(20px);
transform:translateY(40px);
在实际开发中,单纯对某个元素定义平移是没有太多意义的。这一章介绍的变形效果一般都是结合CSS3动画一起使用的。因此,在这一章的学习中,我们只需要掌握变形效果的语法,先不用管怎么用。至于怎么用,等我们学了CSS3动画自然就会知道了。
css 平移到某个位置_平移:translate() - CSS3 | 绿叶学习网相关推荐
- 什么是css css3,CSS3简介 - CSS3 | 绿叶学习网
对于刚刚接触CSS3的小伙伴,一开始肯定会有这么一个疑问:"CSS3跟CSS有什么区别呢?"实际上,CSS是从CSS1.CSS2.CSS2.1到CSS3这几个版本一路升级而来的. ...
- 背景大小比率css,背景大小:background-size - CSS3 | 绿叶学习网
在CSS2.1中,我们是不能使用CSS来控制背景图片大小的,背景图片的大小都是由图片实际大小决定. 在CSS3中,我们可以使用background-size属性来定义背景图片的大小,这样可以使得同一张 ...
- html padding如何设置内边距,内边距:padding - CSS | 绿叶学习网
内边距padding,又常常被称为"补白",它指的是内容区到边框之间的那一部分.内边距都是在边框内部的. 一.padding局部样式 从CSS盒子模型中我们可以看出,内边距分为4个 ...
- css 平移到某个位置_怎么实现点击div移动到某个位置,再点击时回到原来的位置...
问题:怎么实现点击div移动到某个位置,再点击时回到原来的位置?哪位好心人可以提示一下怎么更优雅地实现这个效果,感觉我写的方法有点乱.非常感谢! 效果图: 圈圈运动 //css代码 * { paddi ...
- css 平移到某个位置_CSS3平移动画效果
在这篇文章中主要是讲如何通过CSS3实现平移动画效果,在开始之前先给大家介绍一下与平移动画有关的CSS3属性以及相关的属性描述. 一.transition-property:是用来指定当元素其中一个属 ...
- css div中文字位置_计算机二级Web(4):CSS基础 (上)
考核目标: 了解CSS样式表的概念及其作用 掌握CSS的基本语法及其使用方法 掌握CSS的常用属性 看i姐使用CSS布局的方法 1.CSS样式表的概念及其作用 CSS(Cascading Style ...
- css鼠标拖拉卡顿_浅谈CSS3 动画卡顿解决方案
为什么会卡顿? 有一个前提必须要提,前端开发者们都知道,浏览器是单线程运行的.但是我们要明确以下几个概念:单线程,主线程和合成线程. 虽然说浏览器执行js是单线程执行(注意,是执行,并不是说浏览器只有 ...
- 绿叶学习网CSS技术细节
引入方式 外联样式表,使用link标签引入,而link 标签放在head标签内 html {background-color: darkgreen;color: azure;font-size: 20 ...
- css3价格斜切_CSS3倾斜skew()方法_CSS3教程_绿叶学习网
9.5 倾斜skew()方法 作者(helicopter) 赞(22) 浏览(26434) 说明:原创教程,禁止转载 一.skew()方法 在CSS3中,我们可以使用skew()方法将元素倾斜显示. ...
最新文章
- 多篇开源CVPR 2020 语义分割论文
- python工程师月薪-在三线城市,Python工程师也能拿到月薪20K?
- Python的故事_two
- 洛谷P1873 砍树
- Django model反向关联名称的方法(转)
- 医院计算机操作权限管理制度,附五医院网络工作站管理制度
- imagex使用方法_Microsoft OneDrive 的使用心得,真香
- Node.js 应用故障排查手册 —— 正确打开 Chrome devtools
- 51nod 省选联测 R2
- Linux signal 编程(转载)
- 未来比较火的计算机领域,【火了】未来十年,中国人才最紧缺的6个专业!
- Linux 下面解压.tar.gz 和.gz文件解压的方式
- Url...................哈哈哈哈哈哈哈哈哈
- php与web服务器关系
- ]Vi/Vim查找替换使用方法
- talib python文档_TALib中文文档代码实现
- 出现错误/ncnn/src/cpu.cpp:426: undefined reference to `stderr'完美解决方案。
- 【数据结构】哈夫曼树、哈夫曼编码
- 从苏宁电器到卡巴斯基第17篇:曲折考研路(上)
- 四.驱动框架入门之LED(中)
热门文章
- 根据IP获取具体城市名称及经纬度坐标
- 慎读书,精读书,反复读好书并学以致用
- java设计帐号密码_怎样用java设置帐号和密码
- ONLYOFFICE的表单复杂字段开发详解
- pycharm运行报错:Process finished with exit code -1073741515 (0xC0000135)
- 视频教程-SpringBoot后台CRM项目(第一季)-Java
- 蓝桥杯 历届试题 小数第n位(C语言)
- 加密锁收集C2V文件更新文件
- kingcms php 下载,KingCMS 企业版_KingCMS官方网站
- Matlab中图文本中的希腊字母和特殊字符