关于css3CSS3 2D 3D转换过渡的学习分享（接上一期）【嘎洒糕】

上期把css3里弹性盒子的几位突出选手秀了一番，那今天就来看看这个css3大舞台究竟还有哪些玄机。

因为作者水平有限得如同广坤哥的头发，所以就选讲点作者觉得在学习过程中比较重要的，毕竟看节目的观众也只能观望观望台面上的一部分啊，记住的就更不多了/(ㄒoㄒ)/~~

舞台的效果1——CSS3 2D 转换

（转换就是可以对元素进行移动、缩放、转动、拉长或拉伸。）

有几种大法——

translate()

rotate()

scale()

skew()

matrix()

【以作者的水平嗯...，就复制粘贴前三个的资料，剩下的自行菜鸟教程吧(￣﹃￣)】

！translate() 方法

根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

借个栗子

div{

transform: translate(50px,100px);

-ms-transform: translate(50px,100px); /* IE 9 */

-webkit-transform: translate(50px,100px); /* Safari and Chrome */

}

！rotate()方法

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

再借个栗子

div{

transform: rotate(30deg);

-ms-transform: rotate(30deg); /* IE 9 */

-webkit-transform: rotate(30deg); /* Safari and Chrome *，之后不再过多标注/

}

！scale()方法

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

格式为scaleX(X),scaleY(Y)

再又借个栗子

-ms-transform:scale(2,3);

-webkit-transform: scale(2,3);

transform: scale(2,3);

这当中的scale（2,3）即表示转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

（我们不是栗子的生产者，我们只是大自然的搬运工）

舞台的效果2—— CSS3 3D 转换

3D 转换的真神方法：rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

和2D不同之处——看上去更~立~体

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

眼熟不，动起来和2D里的rotate()有些相似

但是他动得——更上去更~立~体

transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度

- transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg

  - transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg -->

- x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度

栗

div{

    transform: rotateX(120deg);

    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */

}

舞台的镜头调度——css3过渡

css3过渡，

元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

1，指定要添加效果的CSS属性；

2，指定效果的持续时间。

含盖过渡的div长这样:

div { transition: width 2s; -webkit-transition: width 2s; }

本段，作者认为学习过渡时应着重记忆两块：

div { transition: width 2s; -webkit-transition: width 2s; }

！过渡有哪几种效果

Linear  匀速 默认值。

ease   规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in  规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out   规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

！过渡属性  

transition-property 指定CSS属性的name，transition效果

transition-duration transition效果需要指定多少秒或毫秒才能完成

transition-timing-function 指定transition效果的转速曲线

transition-delay 定义transition效果开始的时候

嗯，今天又变短了，可能是作者的进一步萎了.     (?)

我是可能已经没有脑子的嘎洒糕，拜拜