css 平移到某个位置_CSS3 对象平移translate()translatex()translatey()应用实例,包括水平垂直居中...
CSS3新增了制作动画功能,既然是动画就少不了移动,因此平移属性translate随之增加。translate主要用于控制对象的移动,它又可分为translatex()和translatey(),前者控制对象沿X轴移动,后者控制对象沿Y轴移动,translate既可控制对象沿X轴移动又可控制对象沿Y轴移动,当然也能控件对象同时沿X和Y移动。
translate相对来说是transform中比较简单的属性,最多设置两个值,比较容易理解,有CSS基础,看一个实例基本上就懂了。以下先简单介绍一下translatex()、translatey()和translate()的语法规则,然后分别举一个应用实例。
一、对象平移语法规则
1、translatex语法规则
translatex()
translatex设置对象沿X轴平移,表达式中的translation-value,是对象沿X轴方向平移的数值,如 100px。
2、translatey语法规则
translatey()
translatey设置对象沿Y轴平移,表达式中的translation-value,是对象沿Y轴方向平移的数值,如 100px。
3、translate语法规则
translate([, ? ])
表达式中第一个translation-value,是对象沿X轴方向平移的数值,不能省略;第二个translation-value,是对象沿Y轴方向平移的数值,可以省略。
二、translatex()、translatey()和translate()应用实例
1、translatex()应用实例
html代码:
CSS样式:
.translatex{transform:translatex(100px);border:1px solid #ab9595;width:300px;height:100px;background-color:#e3e2e0; padding:8px;}
效果图:
transform:translatex(100px);
从效果图中可以看出,div沿X轴方向(右边)平移了100像素。
2、translatey()应用实例
html代码:
CSS样式:
.translatey{transform:translatey(100px);border:1px solid #ab9595;width:300px;height:100px;background-color:#e3e2e0; padding:8px;}
效果图:
transform:translatey(100px);
div沿Y轴方向(向下)平移了100像素。
3、translate()应用实例
html代码:
CSS样式:
.translate{transform:translate(100px, 100px);border:1px solid #ab9595;width:300px;height:100px;background-color:#e3e2e0; padding:8px;}
效果图:
transform:translate(100px, 100px);
div沿X轴和Y轴方向都平移了100像素。
4、Css translate 居中
html代码(圆角矩形居中):
Css translate
.box{border:1px solid #ab9595;width:300px;height:100px;background-color:#e3e2e0; padding:8px;}
.translateCenter {
position:absolute;
top:50%;
right:50%;
border-radius:4px;
-webkit-transform:translate(50%, -50%); /* webkit内核浏览器(Chrome/谷歌 和 Safari/苹果)*/
-ms-transform:translate(50%, -50%); /* ie(edge)内核浏览器 */
-moz-transform:translate(50%, -50%); /* firefox(火狐)内核浏览器 */
-o-transform:translate(50%, -50%); /* Opera 内核浏览器 */
transform:translate(50%, -50%); /* W3C标准浏览器 */
}
效果图:
如果把 right:50% 改为 left:50%,transform:translate(50%, -50%) 要改为 transform:translate(-50%, -50%);因为对于 translate 来说,正数表示右边,负数表示左边。对于 top 和 bottom 来说,正数表示上,负数表示下。
Css translate 文字垂直居中
只需在上面的基础上再定义一个文字垂直居中 CSS,即:
.center {
display:flex;
justify-content:center; /* 水平居中 */
align-items:center; /* 垂直居中 */
}
再引用该 CSS,即:
效果图:
css 平移到某个位置_CSS3 对象平移translate()translatex()translatey()应用实例,包括水平垂直居中...相关推荐
- css 平移到某个位置_CSS3平移动画效果
在这篇文章中主要是讲如何通过CSS3实现平移动画效果,在开始之前先给大家介绍一下与平移动画有关的CSS3属性以及相关的属性描述. 一.transition-property:是用来指定当元素其中一个属 ...
- CSS实现元素水平垂直居中的各种方法
关于 CSS 如何将元素进行水平垂直居中的几种常用方法 前言 在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...
- css居中怎么移动,移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现 兼容性: 当前流行的使用方法. .box{ width: 100%; height: 100%; } .content{ position: abso ...
- html 水平垂直居中,css水平垂直居中有几种实现方式?
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
- Android Studio||动态改变xml图片位置+背景/旋转+平移/AnimationSet/java读取drawable图
step by step. 目录 参考: 平移(TranslatAnimation) 旋转(RotateAnimation) AnimationSet xml:(正常设置即可) java: java读 ...
- matlab 函数 平移,MATLAB图线先下平移
平移有哪些性质? 平移后的线段与原线段平行(或在同一直线上)且相等其性质相当于平行四边形的性质. 函数的平移规律 左加右减在x上上加下减在y上 平移一次函数问题 解题思路:根据一次函数平移的性质解答解 ...
- SOLO: 按位置分割对象
SOLO: 按位置分割对象 SOLO: Segmenting Objectsby Locations 论文链接: https://arxiv.org/pdf/1912.04488.pdf 代码链接: ...
- php背景图片 存放位置,CSS中背景图片位置 background-position 的使用方法
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?以下就来介绍CSS中背景图片位置 background-position 的用法. 在背景图片的背景图片位置属 ...
- [css] CSS的伪类和伪对象有什么不同?
[css] CSS的伪类和伪对象有什么不同? 伪类是给当前选中节点添加新样式, 伪对象是给当前选中节点添加伪元素. 伪类选择器使用:,伪对象选择器使用::,因为兼容旧版,所以伪对象使用:也能解析. 个 ...
- 在html中字怎么修改位置,css怎么设置字体位置?
css怎么设置字体位置?下面本篇文章给大家介绍一下使用CSS设置字体位置的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 方法1:使用text-align属性设置字体的位置 t ...
最新文章
- vsftpd用户配置 No.2
- mysql出现多线程操作同一个表的情况,应该怎么办?
- [转] linux-Centos7安装python3并与python2共存
- Web前端知识体系精简
- 无法删除所有指定的值_SQL-插入、更新、删除、创建
- Git的使用——解决中文乱码
- QTableWidget item设置不可以选中和编辑状态
- mysql ignore space_MySQL日志存储空间满引发的错误
- Java设计模式之单例模式(七种写法)
- 企业微信无法上网,其他软件都可以上网
- javaweb调用python修改微信运动步数,使用小米运动接口
- 查询快递单号物流,自动识别出物流是否签收
- (附源码)计算机毕业设计ssm红色景点自驾游网站管理系统
- 活动实录 | 京东金融PE谈如何颠覆应用运维认知
- HTML如何给网页添加icon图标?
- AI中怎么给文字加粗
- OpenGL学习-球体和phong光照模型
- Mac如何修改文件的默认打开程序
- 克鲁斯卡尔算法(kruskal)
- 基于TensorFlow2.0的摄像头数字识别