CSS3转换 -- 课件

课程介绍:深入讲解如何将元素扭曲、移位或者旋转，可以自由的讲HTML组件及逆行装使和变形；

主要内容：
1、CSS3 Transform
2、CSS3 2D转换
3、CSS3 3D转换
4、CSS3 Transform和坐标系统

CSS3 Transform 变形属性：
1、让一个元素在坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转或者缩放；
2、语法：transform:none(不变性)|<变形函数>[<变形函数 — transform-function>]
3、默认值：none
4、兼容性：ie10+ 建议使用chrome firefox


Transform的2D转换；
1、css3 rotate() — 旋转
2、Css3 translate() — 平移
3、Css3 scale() — 缩放
4、Css3 skew() — 扭曲或者斜切


Css3 2D转换
1、旋转rotate ： 通过指定的角度参数对原元素指定一个2D旋转
2、语法：transform:rotate(angle)
3、参数说明：angle指的是：旋转的角度 正数表示顺时针旋转 负数表示逆时针旋转
4、
5、注意点：
(1) Rotate的值只有正数和负数 单位是deg
(2) 为了满足兼容性，一般会加上技术前缀 类似：-webkit-





移动translate
1、根据X轴（左）和y轴（顶部）位置给定的参数，从当前元素位置开始移动；
2、三种情况：
(1) translateX(x) 仅水平方向移动
(2) TranslateY(y) 仅垂直方向移动
(3) Translate(x,y) 水平和垂直方向同时移动

TranslateX(值)
1、通过给定一个x方向指定一个translation(平移)
2、语法：transform：translatex(值)
3、总结：
(1) 可以改变数值 正数负数可以 0px的时候正好恢复原始位置
(2) Left right等不可以使用
(3) % em等单位也可以；


TranslateY(值)
4、通过给定一个y方向指定一个translation(平移)
5、语法：transform：translateY(值)
6、总结：
(1) 可以改变数值 正数负数可以 0px的时候正好恢复原始位置
(2) Left right等不可以使用
(3) % em等单位也可以；


Translate(x,y)
1、通过矢量(x,y) 指定一个2Dtranslation,x和y可以说是一个过渡值参数；
2、语法：transform：translate(x,y) - 填写值
3、总结：
(1) x轴得值 必须填写
(2) y轴可写可不写 但是如果不写得话默认是0


缩放scale
1、指定对象得2D缩放
2、三种情况;
(1) Scale(x) 仅水平方向得缩放(x轴得缩放)
(2) Scale(y) 仅垂直方向得缩放
(3) Scale(x,y) 仅水平和垂直同时进行缩放





ScaleX(x)
1、使用[sx,1] 缩放矢量来进行缩放操作，sx就是所需要得参数；
2、语法：scale(x)
3、总结：
(1) 一般使用0到1之间得百分比显示
(2) 负数可以设置，但是没有意义
(3) 以中心Y轴中心进行缩放


ScaleY(y)
4、使用[sy,1] 缩放矢量来进行缩放操作，sY就是所需要得参数；
5、语法：scale(y)
6、总结：
(1) 一般使用0到1之间得百分比显示
(2) 负数可以设置，但是没有意义
(3) 以中心x轴中心进行缩放


Scale(x,y)
1、[x,y]缩放矢量来指定一个2D缩放
2、Scale(x,y)
3、总结：
(1) 不需要单位，表示百分比
(2) 只写一个值也表示等比例缩放


扭曲skew
1、skew()方法 指定对象得skew transformation(斜切扭曲)
2、三种情况：
(1) SkewX(x) 仅水平方向得扭曲变形
(2) SkewY(y) 仅垂直方向得扭曲变形
(3) Skew(x,y) 仅水平和垂直得同时得扭曲变形


skewX()
1、按给定得角度沿着x轴指定一个斜切变换
2、语法;transform:skewX(angle)
3、总结：
(1) 正值：逆时针
(2) 负值：顺时针
(3) 0deg得话正好重合



skewY()
4、按给定得角度沿着y轴指定一个斜切变换
5、语法;transform:skewY(angle)
6、总结：
(1) 正值：顺时针
(2) 负值：逆时针
(3) 0deg得话正好重合
(4) 90deg得时候厚度显示为0，图片没有了
(5) Odeg和180deg显示图片一样
(6) 正确得取值范围：-90deg~90deg


Skew(x,y)
1、x轴y轴上得skew transformation(斜切扭曲变换) 第一个参数：对应得x轴 第二个参数表示y轴
2、语法：skew(angle)
3、总结：如果y=0 只有水平方向得切换
4、如果x=0，只有垂直方向得切换
5、只有一个值得话第二个值默认为0


CSS 3D 转换
1、rotate3d — 3d旋转
2、Tanslate3d — 3d平移
3、Scale 3d — 3d斜切


RotateX
1、方法指定对象在x轴上得旋转角度
2、语法：transform：rotateX(angle)
3、参数说明：angle表示旋转得角度
4、总结：以x轴方向进行旋转得，而且到180deg和0deg得图片显示相反


RotateY
5、方法指定对象在y轴上得旋转角度
6、语法：transform：rotateY(angle)
7、参数说明：angle表示旋转得角度
8、总结：以y轴方向进行旋转得，而且到180deg和0deg得图片显示相反,90deg图片消失





RotateZ
1、指定对象在Z轴方向得旋转
2、语法：rotateZ(angle)
3、参数说明：angle表示角度
4、总结：以z轴进行旋转；


Rotate3d()
1、指定对象3d旋转效果
2、语法：transform:rotate3d(x,y,z,angle)
3、参数说明：前3个参数表示表示旋转得方向，第4个参数表示旋转得角度，参数不允许省略
4、总结：x y z值一般情况下：0 ~ 10
5、Angle得取值范围:-360deg ~ 360deg


TranslateZ()
1、指定对象得Z轴得平移；
2、语法：translateZ(z)
3、参数说明：参数对应得是Z轴得值，不允许省略
4、总结：
(1) 相当于以3维空间在前后平移
(2) 如果是5px 表示向我们得屏幕来了5像素
(3) 如果是-5px 表示远离我们得屏幕去了5像素

Translate3d()
1、指定对象得3d平移
2、Transform：translate3d(x,y,z)
3、参数说明：
(1) 第一个参数对应X轴 第二个y轴 第三个z轴，参数不允许省略


ScaleZ()
1、指定对象得Z轴缩放
2、语法：scaleZ(Z) — 可以是一个比例值
3、参数说明：参数对应得Z轴 不允许省略
4、总结：看不出来效果，但是是厚度得变化


Scale3d()
1、指定对象得3d缩放
2、Transform：scale3d(x,y,Z)
3、参数说明：第一个参数x 第二个参数y 第三个参数z 不允许省略



Transform和坐标系统
这个基准点在哪里？？


Transform-origin属性；
1、允许我们更改转换元素得位置
2、语法：transform-origin:(x-axis,y-axis,zxis)
3、
4、