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的新特性介绍
Oct 31 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 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
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
windows下python和pip安装教程
2018/05/25 Python
python dict 相同key 合并value的实例
2019/01/21 Python
关于Python作用域自学总结
2019/06/10 Python
Django 用户认证组件使用详解
2019/07/23 Python
python同时遍历两个list用法说明
2020/05/02 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
Python分类测试代码实例汇总
2020/07/23 Python
python爬取天气数据的实例详解
2020/11/20 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
市场部管理制度
2014/02/02 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
自动一体化专业求职信
2014/03/15 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书