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配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
css3应用示例:新增的选择器
Mar 16 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
一个数据采集类
2007/02/14 PHP
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
班组长工作职责
2013/12/25 职场文书
犯错检讨书
2014/02/21 职场文书
给学校建议书范文
2014/05/13 职场文书
最常使用的求职信
2014/05/25 职场文书
财务负责人任命书
2014/06/06 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2016年教师节感言
2015/12/09 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书