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

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);

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

css中translation,css3 translate属性
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动):translateX(x)仅水平方向移动(X轴移动):translateY(Y)仅垂直方向移动(Y轴移动)默认都是从 ...
[css] 请使用css3实现图片的平滑转换
[css] 请使用css3实现图片的平滑转换以全局监听的方式通过 a 标签的描点进行 view 动态切换页面,只要把 a 标签带有 id 的 href 属性的值指到锚点,用 CSS3 的动画进行切换 ...
CSS3转换之移位translate（CSS3）
CSS3转换之移位translate(CSS3) <!DOCTYPE html> <html lang="en"><head><meta ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
CSS提高和CSS3新增
(二)CSS高级技巧 (序号接上一篇)CSS基础十八.精灵图 1.为什么需要精灵图一个网页中往往会应用很多小背景图作为装饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求 ...
css参考手册css3手册_CSS手册：面向开发人员CSS便捷指南
css参考手册css3手册 I wrote this article to help you quickly learn CSS and get familiar with the advanced ...
c语言实现图片过渡效果飞入,用css3实现转换过渡和动画效果
为什么要用css动画替换js动画导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
CSS3 3D转换和旋转木马案例
文章目录前言有什么特点一.三维坐标系 3D转换二.3D移动translate3d 三.透视perspective 四.translateZ 五.3D旋转rotate3d 六. 3D呈现tran ...
保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
文章目录 transfrom 2D转换案例代码效果图元素变形原点 3D转换 3D转换--案例案例代码 transfrom transform,翻译成中文的含义是"改变,使-变形:转换 ...
html3d转换,CSS3 3D 转换
# CSS3 3D 转换 ## 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: * rotateX() * rotateY() 点击下 ...

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

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

最新文章

热门文章