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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 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面向对象编程快速入门
2006/12/14 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
简述php环境搭建与配置
2016/12/05 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
layui实现数据表格自定义数据项
2019/10/26 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
python实现给字典添加条目的方法
2014/09/25 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
小学课外活动总结
2014/07/09 职场文书
处级干部考察材料
2014/12/24 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
面试通知短信
2015/04/20 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
vue中 this.$set的使用详解
2021/11/17 Vue.js
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python
python turtle绘图
2022/05/04 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android