变换

变换

变换也是CSS3的一个CSS属性，它指元素在水平方向，垂直方向或Z轴方向进行大小，方向，角度的转变，它主要使用的就是transform这一个属性

位移

位移可以看成是相对定位里面的位置变化，除了单位不一样以外，其它的都一样

位移也是根据口诀“上负下正，左负右正”来完成的

位移指的一个元素在X轴或Y轴或Z轴去发生坐标变化，它主要使用的属性值是translate

1. translateX(坐标)沿着X轴进行位移
2. translateY(坐标)沿着Y轴进行位移
3. translate(横坐标,纵坐标)如果只有一个值则代表X轴进行位移，如果两个值则第一个值代表X轴位移，第二值代表Y轴位移
4. translateZ(坐标)沿着Z轴进行位移【需要开启3D空间】
5. translate3d(横坐标，纵坐标，Z轴坐标)元素在三维空间里面进行位移【需要开启3D空间】

通过学习位移我们发现位移与相以定位非常相似，它们位移以后都高于普通文档流，都要保留原来的位置，但是唯一的区别点就在于translate进行位移的时候以自身为标准，translateX(100%)则是移动自己的宽度的大小，translateY(100%)则是移动自己高度的100%

缩放

在不改变元素width/height的值的情况下，可以将元素整体的放大或缩小，它使用的属性值是scale，它们的取值以1为中心点，1代表当前大小，如果小于这个值代表缩小，如果大于这个值代表放大

1. scaleX(大小)在X轴方向进行缩放
2. scaleY(大小)在Y轴方向进行缩放
3. scale(X轴缩放,Y轴缩放)同时在X轴方向与Y轴方向进行一个缩放

旋转

旋转指的是元素沿X轴，Y 轴或Z轴发生角度的变换 。主要使用的属性值是rotate

1. rotateX()沿着X轴进行旋转
2. rotateY()沿着Y轴进行旋转
3. rotateZ()沿着Z轴进行旋转

旋转的时候主要使用的单位就是2个单位，第1个单位就是deg单位 ，这个单位是度数的意思，如rotateZ(45deg)就是沿着Z轴去旋转45度，第二个单位是turn代表圈数，如rotateZ(0.5turn)代表沿着Z轴去旋转0.5圈

🤔 思考：角度的正负是怎么区分的？

变形（倾斜）

这个变换不怎么常用

1. skewX(度数)在X轴方向沿一定的角度倾斜
2. skewY(度数)在Y轴方向沿一定的角度倾斜

---

开启3D转换

当元素如果要实现3D效果的展示，需要开启一个3D的展示空间，让元素形成3D空间效果有两个方法

1. 添加3D视距【元素本身并不是3D，只是看起来在一直3D的空间里面】

   在其外层元素添加属性perspective,数值越大透明效果越不显示，数值越小，透视效果越明显

   .box{
       width: 200px;
       height: 200px;
       background-color: #20B2AA;
       font-size:32px;
       transform: rotateX(30deg);
   }
   .outBox{
       width: 200px;
       height: 200px;
       border: 2px solid red;
       /* 数值越小，透视效果越明显
       一般有个参考值，如果是X轴就参照width
       如果是Y轴就参照height
       */
       perspective: 200px;
   }
   

   

2. 自已形成Z轴的距离【元素本身形成了一个3D元素】

   在其父级的元素添加属性transform-style:preserve-3d。添加这个属性，外层的元素就会形成一立体包裹空间，内部的元素就可以自己根据需求形成一个Z轴的高度

---

变换的其它属性

1. transform元素进行变幻

2. transform-style元素的变幻类型 ，它有两个属性值

   • preserve-3d形成3D空间
   • flag元素形成平面空间【默认值】

3. transform-origin设置变换起点位置，如果是X轴的变换，我们可以设置top/bottom/cener，如果是沿着Y轴去发生变换，我们可以设置left/right/center,如果是沿着Z轴变换，我们可以设置两个属性值如transform-origin:left top;

4. backface-visibility当元素经过变换以后，如果背对着用户，去设置这个元素是可见状态还是不可见状态

   • visible可见
   • hidden不可见

元素多个变换的结合

一个元素是否能够既产生位移 ，又产生绽放，还能产生旋转的效果呢？？？？

当一个元素如果要进行多个变幻的时候，应该怎么设置值呢，它设值的顺序也是有要求的。它采用下面的语法格式

transform: 变幻1 变幻2 变幻3......;

多个变换值之间使用空格来进行隔开，它们的顺序最好依照先位移，再缩放，最后旋转

transform: translateX(200px) translateY(150px) scale(1.5) rotateZ(45deg);

---

兼容性处理

我们昨天所学习的transition 过渡以及今天所学习的trasnform变换它们都是一个CSS3的属性，在CSS3的属性里面，我们需要根据不同的浏览器去设置不同的兼容性处理。

在使用CSS3的属性之前我们都要去处理这个属性的兼容性，不同浏览器的兼容性情况是不一样的

浏览器根据不同的核心可以大致划分为下面几种类型

1. 以谷歌浏览器为核心的里面是以-webkit-来处理兼容性，如-webkit-transform,-webkit-transitiobn。像我们日常使用的谷歌浏览器，或360浏览器，或世界之窗等这些浏览器都是以谷歌为核心的
2. 以微软的IE浏览器为核心的则是以-ms-来处理兼容性，如-ms-transform,-ms-transition
3. 以火狐浏览器为核心的则是以-moz-来处理兼容性，如-moz-transform,-moz-transition
4. 以欧鹏为核心的浏览器则是以-o-来处理兼容性，如-o-transform,-o-transition

一般在正式开发的环境下面，我们都会这么写来处理兼容性

.div{
    transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
}

案例

1. 完成下面图片的效果

   鼠标放上去出现背景遮罩

   

2. 完成下面图片的效果

   点击门这个盒子，将门打开或关闭掉

3. 完成下面图片的效果