translate3d,translate

2D和3D转换

转换（transform）

transform 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。

要想学好2D和3D转换要先对 坐标 有一定了解

2D

2维坐标系

2D转换中的 属性

在使用转换是我们要先给元素添加转换属性 transform(x,y)，X代表X轴，Y代表Y轴

1.移动 translate

当我们要移动盒子时，可以给盒子添加? transform:translate(50px,50px); ?属性 让盒子做到移动效果(小括号里可以使用百分比%)

2.旋转 rotate

旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

给元素添加转换属性? transform:rotate(30deg) ?，这里小括号里可以写正值也可以写负值，但单位一定是 deg ，正值就是顺时针旋转，负值则相反

3.旋转中心 transform-origin

可以修改属性旋转式的中心点

origin：原点，如果与rotate旋转配合使用，就是旋转的中心点。如果与scale配合使用，就是缩放的基准点。

transform-origion里的值可以写 百分比% ，方位名词，单位px和0

4.缩放 scale

缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小

** transform:scale(x,y)** 这里的X、Y 代表的即使方向 ，但在小括号里的值是? 原先盒子大小的 倍数

3D

3维坐标

3D和2D的不同点就是，在3D中增加了一个? Z轴 ?Z轴可以看做是 平常正对着我们的方向

在学习3D之前我们要先在大脑中产生一个 三维的方向感

3D中的属性

和2D一样 在3D中也有 移动 translate ?旋转 rotate ?当然也有新增属性? 视距 perspertive

1.移动 translate

3D中的移动和2D中的移动是一样的，只是增加了一个 Z轴 方向的移动，当我们想要在 Z轴 方向移动时，给元素添加**translform:translateZ(100px)**即可 移动后我们会看到盒子明显变大了，这里盒子变大并不是 宽度和高度 上的变大，是这个盒子? 距离我们的眼睛更近了

我们可以用? translate3d(x,y,z) ?来实现和写 注意：小括号里的顺序一定不要错

2.旋转 rotate

3D里的旋转是? 沿着某一个轴进行旋转 ?X、Y、Z 每个轴的旋转方式都不一样，我们可以用 左手定则 来记旋转

X轴就像单杠运动员，Y轴就像跳钢管舞的姑娘，Z轴就像抽奖游戏

3.3D呈现 transform-style

上面的属性并不能给我们3D的感觉 要想在页面中看到3D效果需要，给要做3D效果的元素的父级添加? transform-style: preserve-3d; ? 真3D

如何用JS获取translate3d中的数值

获取代码如下：

div id="test" style="tranform:translate3D(20px,50px,0);"/div

var style = document.getElementById('test').style;

var transform = style.transform || '';

var transformY = transform.match(/translate3d\(\d+px,\s*(\d+)px,\s*(\d+)px\)/i)[1];

解释：

style是id为test的div的style属性

transform是style规则中的transform属性，此处忽略前缀问题，如果需要取-webkit-transform则可以通过WebkitTransform获取

transform.match(/translate3d\(\d+px,\s*(\d+)px,\s*(\d+)px\)/i)[1];获取translate3d第二个参数的数值，此题中为50

css3 为什么用translate3d

使用 translate3d 方法可以让浏览器开启GPU硬件加速模式，这样浏览器在渲染页面时会由CPU绘制转变成GPU绘制，渲染效率将会大大的提升，同时相关的动画也会更加流畅自然，其本质在于：translate3d() 与 translate() 二者的底层运行机制不同， translate3d 的效率和流畅度要高于 translate()。