编程 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代码实现switch滑动开关按钮效果

Aug 30 HTML / CSS

CSS3新属性transition-property transform box-shadow实例学习

Jun 06 HTML / CSS

css3圆角样式分享自定义按钮样式

Dec 27 HTML / CSS

如何用border-image实现文字气泡边框的示例代码

Jan 21 HTML / CSS

如何使用localstorage代替cookie实现跨域共享数据问题

Apr 18 HTML / CSS

html5 音乐播放器 audio 标签使用概述

Jul 15 HTML / CSS

解析HTML5的存储功能和web SQL的相关操作方法

Feb 19 HTML / CSS

使用phonegap获取位置信息的实现方法

Mar 31 HTML / CSS

HTML5 解决苹果手机不能自动播放音乐问题

Dec 27 HTML / CSS

canvas探照灯效果的示例代码

Nov 30 HTML / CSS

前后端结合实现amazeUI分页效果

Aug 21 HTML / CSS

从QQtabBar看css命名规范BEM的详细介绍

Aug 07 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

VML绘图板②脚本--VMLgraph.js、XMLtool.js

2006/10/09 PHP

PHP实现网上点歌（二）

2006/10/09 PHP

?算你??的 PHP 程式大小

2006/12/06 PHP

PHP常用代码大全(新手入门必备)

2010/06/29 PHP

php获取淘宝分类id示例

2014/01/16 PHP

PHP获取网页标题的3种实现方法代码实例

2014/04/11 PHP

PHP编程 SSO详细介绍及简单实例

2017/01/13 PHP

浅谈laravel5.5 belongsToMany自身的正确用法

2019/10/17 PHP

php 命名空间(namespace)原理与用法实例小结

2019/11/13 PHP

PHP PDO和消息队列的个人理解与应用实例分析

2019/11/25 PHP

Javascript 读后台cookie代码

2008/09/15 Javascript

兼容ie、firefox的图片自动缩放的css跟js代码分享

2012/01/21 Javascript

从零学JSON之JSON数据结构

2014/05/19 Javascript

JavaScript常用本地对象小结

2016/03/28 Javascript

JavaScript中关于iframe滚动条的去除和保留

2016/11/17 Javascript

微信小程序 Windows2008 R2服务器配置TLS1.2方法

2016/12/05 Javascript

微信小程序设置启动页面的两种方法

2017/03/09 Javascript

Vue 拦截器对token过期处理方法

2018/01/23 Javascript

JS加密插件CryptoJS实现的Base64加密示例

2020/08/16 Javascript

浅谈React碰到v-if

2018/11/04 Javascript

说说如何利用 Node.js 代理解决跨域问题

2019/04/22 Javascript

nodejs通过钉钉群机器人推送消息的实现代码

2019/05/05 NodeJs

js实现全选和全不选

2020/07/28 Javascript

element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)

2020/12/02 Vue.js

[03:36]2015国际邀请赛第二日现场精彩集锦

2015/08/06 DOTA

Python+OpenCV 实现图片无损旋转90°且无黑边

2019/12/12 Python

Python字符串split及rsplit方法原理详解

2020/06/29 Python

使用html5 canvas绘制圆环动效

2019/06/03 HTML / CSS

捷克汽车配件和工具销售网站：TorriaCars

2018/02/26 全球购物

年度献血先进个人事迹材料

2014/02/14 职场文书

秋天的雨教学反思

2014/04/27 职场文书

我的祖国演讲稿

2014/05/04 职场文书

物业消防安全责任书

2014/07/23 职场文书

2014校长四风问题对照检查材料思想汇报

2014/09/16 职场文书

领导班子“四风问题”“整改方案

2014/10/02 职场文书

司法局群众路线教育实践活动开展情况总结

2014/10/25 职场文书