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

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

translatex:向x轴平移，填正数往右平移，填负数，往左平移

在这里插入图片描述

translatey :向y轴平移，填正数往下平移，填负数，往上平移

在这里插入图片描述

translatez :填的值越大你看到的图像离你感觉越近，天的值越小你看到的图像离你越远

在这里插入图片描述

translate同时设置 translatex ，translatey

translate(translatex,translatey)

第一个参数是向x轴平移，填正数往右平移，填负数，往左平移
第二个参数是向y轴平移，填正数往下平移，填负数，往上平移

在这里插入图片描述

translate3d 同时设置 translatex ，translatey 和 translatez 所以里面可以填三个参数
translate3d()

transform：translate3d(0,-50%,-50px)

第一个参数是向x轴平移，填正数往右平移，填负数，往左平移
第二个参数是向y轴平移，填正数往下平移，填负数，往上平移
第三个参数是向z轴平移，填的值越大你看到的图像离你感觉越近，天的值越小你看到的图像离你越远

到此这篇关于css3实现平移效果(transfrom：translate)的示例的文章就介绍到这了,更多相关css3 平移transfrom：translate内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！

详解css3中的伪类before和after常见用法这篇文章主要介绍了详解css3中的伪类before和after常见用法,本文给大家介绍的非常详细，对大家的... [阅读全文]

CSS3制作3D立方体loading特效这篇文章主要介绍了CSS3制作3D立方体loading特效的示例，帮助大家更好的理解和使用CSS3特效，美化自身网页，... [阅读全文]

详解CSS3：overflow属性这篇文章主要介绍了详解CSS3：overflow属性的相关资料，帮助大家更好的理解和制作CSS3特效，感兴趣的朋友可以了解下... [阅读全文]

CSS3实现莲花绽放的动画效果这篇文章主要介绍了CSS3实现莲花绽放得动画效果，帮助大家更好得理解和制作CSS特效，美化自身网页，感兴趣的朋友可以了解下...... [阅读全文]

CSS3实现菜单悬停效果这篇文章主要介绍了CSS3实现菜单悬停效果的示例代码，帮助大家更好的制作CSS3特效，美化网页，感兴趣的朋友可以了解下... 20-1... [阅读全文]

CSS3制作圆形滚动进度条动画的示例这篇文章主要介绍了CSS3制作圆形滚动进度条动画的示例，帮助大家制作CSS3特效，美化自身网页，感兴趣的朋友可以了解下... 20-11-05…

2020年11月05日 • 网页制作


验证码：

验证码：

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