css translate 坐标,CSS3 位移转换 translate3d()translatez()应用实例

css translate 坐标,CSS3 位移转换 translate3d()translatez()应用实例CSS3转换中的对象(div、ulli等)位移变换分为2d与3d两种情况,2d即对象在平面中移动,3d即对象在空间中移动;2d的平移在前面的文章中已经介绍过,本篇介绍3d的情况,与2d不同的是多一个Z坐标轴。由于translate3d要用到translatez,所以在介绍它之前需要先了解translatez。下面先介绍translatez和translate3d的语法规则,再分别分享一个…

大家好,欢迎来到IT知识分享网。

CSS3转换中的对象(div、ul li等)位移变换分为2d与3d两种情况,2d即对象在平面中移动,3d即对象在空间中移动;2d的平移在前面的文章中已经介绍过,本篇介绍3d的情况,与2d不同的是多一个Z坐标轴。

由于 translate3d 要用到 translatez,所以在介绍它之前需要先了解 translatez。下面先介绍translatez和translate3d的语法规则,再分别分享一个应用实例。

一、translatez语法规则

translatez()

语法规则比较简单,表示对象在Z轴的位移,例如 50px。

二、translate3d语法规则

translate3d(, , )

第一个:设置对象在X轴的位移,不能省略,取值可用百分比或长度;

第二个:设置对象在Y轴的位移,不能省略,取值可用百分比或长度;

:设置对象在Z轴的位移,不能省略。

三、translatez()和translate3d()应用实例

1、translatez()应用实例

html代码:

transform:translatez(150px)

CSS样式:

.translatez{transform:translatez(150px);width:230px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

效果图:

transform:translatez(150px)

2、translate3d()应用实例

html代码:

transform:translate3d(100px,120px,200px);

CSS样式:

.translate3d{transform:translate3d(100px,120px,200px);width:350px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

效果图:

transform:translate3d(100px,120px,200px);

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/11130.html

(0)
上一篇 2024-03-24 08:33
下一篇 2024-03-27 09:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信