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 给背景设置渐变色的方法
Sep 12 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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实现通过URL提取根域名
2016/03/31 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
Python中super函数的用法
2017/11/17 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
python中count函数简单用法
2020/01/05 Python
Python sep参数使用方法详解
2020/02/12 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
初中生学习的自我评价
2013/11/14 职场文书
客户表扬信范文
2014/01/10 职场文书
高中军训感言800字
2014/03/05 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android