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的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 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中文乱码解决方案
2015/03/05 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
中秋节超市促销方案
2014/01/30 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
2015年教研组工作总结
2015/05/04 职场文书
诚信考试主题班会
2015/08/17 职场文书
详解Vue router路由
2021/11/20 Vue.js