杨标的博客

菜单

Administrator
发布于 2020-07-24 / 15537 阅读 / 0 评论 / 3 点赞

变换

变换

变换也是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;
}
    image-20200605105933743

  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的属性之前我们都要去处理这个属性的兼容性，不同浏览器的兼容性情况是不一样的

image-20200605134510055

image-20200605134532694

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

  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. 完成下面图片的效果

    鼠标放上去出现背景遮罩

    ![案例效果图片](https://gitee.com/lovesnsfi_admin/images4mk/raw/master/imgs/GIF 2020-6-5 9-22-57.gif)

  2. 完成下面图片的效果

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

GIF 202065 113356.gif

  1. 完成下面图片的效果

image.png

过渡
盒子模型

评论