css3实现平移效果(transfrom:translate)的示例


Posted in HTML / CSS onNovember 13, 2020

我们使用translate这个参数来实现移动

translateX:向X轴平移,填正数往右平移,填负数,往左平移

css3实现平移效果(transfrom:translate)的示例

translateY :向Y轴平移,填正数往下平移,填负数,往上平移

css3实现平移效果(transfrom:translate)的示例

translateZ :填的值越大你看到的图像离你感觉越近,天的值越小你看到的图像离你越远

css3实现平移效果(transfrom:translate)的示例

translate同时设置 translateX ,translateY

translate(translateX,translateY)

第一个参数是向X轴平移,填正数往右平移,填负数,往左平移
第二个参数是向Y轴平移,填正数往下平移,填负数,往上平移

css3实现平移效果(transfrom:translate)的示例

translate3d 同时设置 translateX ,translateY 和 translateZ 所以里面可以填三个参数
translate3d()

transform:translate3d(0,-50%,-50px)

第一个参数是向X轴平移,填正数往右平移,填负数,往左平移
第二个参数是向Y轴平移,填正数往下平移,填负数,往上平移
第三个参数是向Z轴平移,填的值越大你看到的图像离你感觉越近,天的值越小你看到的图像离你越远

到此这篇关于css3实现平移效果(transfrom:translate)的示例的文章就介绍到这了,更多相关css3 平移transfrom:translate内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 HTML / CSS
CSS3 文字动画效果
Nov 12 #HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 #HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 #HTML / CSS
CSS3 实现发光边框特效
Nov 11 #HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 #HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 #HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 #HTML / CSS
You might like
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php实现的在线人员函数库
2008/04/09 PHP
深入php self与$this的详解
2013/06/08 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
javascript常用方法总结
2015/05/14 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python 性能优化技巧总结
2016/11/01 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
Python实现分数序列求和
2020/02/25 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
环境科学毕业生自荐信
2013/11/21 职场文书
保护环境标语
2014/06/09 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
西游降魔篇观后感
2015/06/15 职场文书
2015入党个人自传范文
2015/06/26 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
使用Python解决图表与画布的间距问题
2022/04/11 Python
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL