编程 HTML / CSS

css3实现平移效果(transfrom：translate)的示例

Posted in HTML / CSS onNovember 13, 2020

我们使用translate这个参数来实现移动

translateX:向X轴平移，填正数往右平移，填负数，往左平移

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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！

css3实现平移效果(transfrom：translate)的示例

- Author -

奔向架构的菜鸟

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

CSS3正方体旋转示例代码

Aug 08 HTML / CSS

CSS中垂直居中的简单实现方法

Jul 06 HTML / CSS

什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条

Apr 26 HTML / CSS

纯CSS3实现扇形动画菜单(简化版)实例源码

Jan 17 HTML / CSS

利用CSS3 动画绘画圆形动态时钟

Mar 20 HTML / CSS

HTML5注册页面示例代码

Mar 27 HTML / CSS

canvas需要在标签里直接定义宽高

Dec 17 HTML / CSS

浅谈关于html5中图片抛物线运动的一些心得

Jan 09 HTML / CSS

Html5页面中的返回实现的方法

Feb 26 HTML / CSS

HTML利用九宫格原理进行网页布局

Mar 13 HTML / CSS

详解如何将 Canvas 绘制过程转为视频

Jan 25 HTML / CSS

不要在HTML中滥用div

May 08 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之require/include顺序推荐

2011/01/02 PHP

discuz图片顺序混乱解决方案

2015/07/29 PHP

详解WordPress中添加友情链接的方法

2016/05/21 PHP

PHP迭代器和生成器用法实例分析

2019/09/28 PHP

图片连续滚动代码[兼容IE/firefox]

2009/06/11 Javascript

容易被忽略的JS脚本特性

2011/09/13 Javascript

JS代码同步文本框内容的实例方法

2013/07/12 Javascript

window.open()详解及浏览器兼容性问题示例探讨

2014/05/29 Javascript

浅谈轻量级js模板引擎simplite

2015/02/13 Javascript

jquery使用hide方法隐藏指定id的元素

2015/03/30 Javascript

js实现字符串转日期格式的方法

2015/05/20 Javascript

教你用javascript实现随机标签云效果_附代码

2016/03/16 Javascript

javascript运算符语法全面概述

2016/07/14 Javascript

bootstrap网格系统使用方法解析

2017/01/13 Javascript

Bootstrap警告框（Alert）插件使用方法

2017/03/21 Javascript

详解Vue 事件驱动和依赖追踪

2017/04/22 Javascript

Vue.js实现文章评论和回复评论功能

2020/05/30 Javascript

JS仿QQ好友列表展开、收缩功能(第二篇)

2017/07/07 Javascript

JS库中的Particles.js在vue上的运用案例分析

2017/09/13 Javascript

详解node.js中的npm和webpack配置方法

2018/01/21 Javascript

js实现开关灯效果

2020/03/30 Javascript

vue-路由精讲二级路由和三级路由的作用

2020/08/06 Javascript

Python struct.unpack

2008/09/06 Python

Python中无限元素列表的实现方法

2014/08/18 Python

Python爬取附近餐馆信息代码示例

2017/12/09 Python

Python入门学习指南分享

2018/04/11 Python

Python enumerate函数功能与用法示例

2019/03/01 Python

Python函数的默认参数设计示例详解

2019/12/01 Python

将pycharm配置为matlab或者spyder的用法说明

2020/06/08 Python

Canvas多边形绘制的实现方法

2019/08/05 HTML / CSS

马德里著名的运动鞋商店：NOIRFONCE

2019/04/12 全球购物

如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗

2012/02/15 面试题

实训报告范文大全

2014/11/04 职场文书

本溪关门山导游词

2015/02/09 职场文书

调解协议书范本

2016/03/21 职场文书

Python如何识别银行卡卡号?

2021/06/10 Python