编程 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新属性

Nov 11 HTML / CSS

简单总结CSS3中视窗单位Viewport的常见用法

Feb 04 HTML / CSS

CSS3中的Media Queries学习笔记

May 23 HTML / CSS

CSS3与动画有关的属性transition、animation、transform对比（史上最全版）

Aug 18 HTML / CSS

详解CSS3中的box-sizing（content-box与border-box）

Apr 19 HTML / CSS

通过css3的filter滤镜改变png图片的颜色的示例代码

May 06 HTML / CSS

详解CSS3+JS完美实现放大镜模式

Dec 03 HTML / CSS

HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字等

Nov 30 HTML / CSS

利用HTML5 Canvas API绘制矩形的超级攻略

Mar 21 HTML / CSS

关于h5中的fetch方法解读(小结)

Nov 15 HTML / CSS

localStorage、sessionStorage使用总结

Nov 17 HTML / CSS

canvas像素点操作之视频绿幕抠图

Sep 11 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

改进的IP计数器

2006/10/09 PHP

PHP删除特定数组内容并且重建数组索引的方法.

2011/03/25 PHP

详解WordPress中用于合成数组的wp_parse_args()函数

2015/12/18 PHP

IE6,IE7,IE8下使用Javascript记录光标选中范围（已补全）

2011/08/28 Javascript

常见JS效果之图片减速度滚动实现代码

2011/12/08 Javascript

FireFox下XML对象转化成字符串的解决方法

2011/12/09 Javascript

javascript加号"+"的二义性说明

2013/03/04 Javascript

基于JQuery实现的图片自动进行缩放和裁剪处理

2014/01/31 Javascript

JavaScript怎么判断图片是否加载完成以便获取其尺寸

2014/05/08 Javascript

node.js中的buffer.Buffer.byteLength方法使用说明

2014/12/10 Javascript

javascript的switch用法注意事项分析

2015/02/02 Javascript

JavaScript检测鼠标移动方向的方法

2015/05/22 Javascript

老生常谈遮罩层滚动条的问题

2016/04/29 Javascript

使用Vue实现移动端左滑删除效果附源码

2019/05/16 Javascript

Vue v-model组件封装(类似弹窗组件)

2020/01/08 Javascript

基于redis的小程序登录实现方法流程分析

2020/05/25 Javascript

JS实现炫酷轮播图

2020/11/15 Javascript

[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/16 DOTA

Python实现微信公众平台自定义菜单实例

2015/03/20 Python

Python函数可变参数定义及其参数传递方式实例详解

2015/05/25 Python

Python访问纯真IP数据库脚本分享

2015/06/29 Python

Python使用Pycrypto库进行RSA加密的方法详解

2016/06/06 Python

详解 Python中LEGB和闭包及装饰器

2017/08/03 Python

Python3实现的回文数判断及罗马数字转整数算法示例

2019/03/27 Python

如何用C代码给Python写扩展库(Cython)

2019/05/17 Python

python 制作磁力搜索工具

2021/03/04 Python

瑞典耳机品牌：URBANISTA

2019/12/03 全球购物

学徒工职责

2014/03/06 职场文书

自荐信的格式

2014/03/10 职场文书

新年寄语大全

2014/04/12 职场文书

2014年民警工作总结

2014/11/25 职场文书

公司文体活动总结

2015/05/07 职场文书

2015年幼儿园班主任工作总结

2015/05/12 职场文书

入党团支部推荐意见

2015/06/02 职场文书

婚庆开业庆典主持词

2015/06/30 职场文书

百年校庆感言

2015/08/01 职场文书