HTML5基础——19、转换-优快云博客

大家好，我是阿赵。
接下来学一下CSS的转换效果。

一、2D转换

还是以一个简单的图片作为例子：

<img src="img/azhao.png">

现在的显示是：
在这里插入图片描述

接下来使用transform对这个图片的显示进行转换

1、位移

img {
  transform: translate(50px, 50px)
}

在这里插入图片描述

现在图片显示的位置就往下和往右移动了50像素。
translate是位移，参数是x和y的移动值，可以是绝对像素，也可以是百分比。
比如：

img {
  transform: translate(50%, 50px)
}

在这里插入图片描述

如果用百分比，是以图片本身的宽度的像素乘以百分比，作为实际移动的像素。

2、旋转

img {
transform: rotate(30deg);
}

在这里插入图片描述

rotate的参数是旋转的角度，deg不能省。
注意，默认的中心点是在图片的正中间，所以这时候旋转，会有些部分超出了屏幕范围。旋转的中心点是可以设置的。比如：

img {
  transform-origin: 0 100%;
  transform: rotate(30deg);
}

这时候，中心点就变成了图片的左下角：
在这里插入图片描述

transform-origin的参数是x方向值和y方向值，需要用空格隔开，可以是绝对像素或者是百分比值。默认是50% 50%。

3、缩放

img {
  transform: scale(0.5, 0.5);
}

在这里插入图片描述

scale的参数是x和y的缩放百分比。如果只写一个值，则表示x和y都用同一个值缩放。
由于默认中心点还是在图片正中心，所以缩小后，图片边缘会有空白。
同样可以使用transform-origin设置中心点，比如：

img {
  transform-origin: 0 100%;
  transform: scale(0.5, 0.5);
}

在这里插入图片描述

4、同时进行

如果需要同时进行位移旋转缩放，可以只写一个transform，然后后面接多个转换，比如：

img {
  transform: translate(100px, 100px) rotate(45deg) scale(0.5);
}

这时候就同时进行了三种转换了：
在这里插入图片描述

需要注意的是，转换的先后顺序是会影响转换的结果的。如果先旋转，会改变坐标的轴方向。比如：

img {
  transform: translate(200px, 0px) rotate(45deg) scale(0.5);
}

和

img {
  transform: rotate(45deg) translate(200px, 0px) scale(0.5);
}

的结果是不一样的。可以自己试试。
所以如果要移动，最好移动写在最前面。

二、3D转换

1、位移

3D的位移转换，使用的是translate3d，然后，如果我们直接这样写：

img {
  transform: translate3d(100px, 100px, 10px)
}

按道理来说translate3d的z参数就是离屏幕远近的参数，但现在并没有效果。
这是因为，3D转换默认是正交视图，是没有近大远小的效果的，所以就算离我们的距离近了，我们也看不出来。
我们尝试着在img里面加透视参数，比如这样：

img {
  perspective: 100px;
  transform: translate3d(100px, 100px, 10px)
}

然而这样还是没有效果。这是因为，perspective属性是需要加在所设置3D转换的物体的父物体的，比如这里的img，父物体是body。

body {
  perspective: 100px;
}

img {
  transform: translate3d(100px, 100px, 10px)
}

这时候就能看到，设置translate3d的z值越大，图片看起来也越大了。至于z值和大小怎样对应，还和perspective的值有关，如果设置perspective的值越小，那么translate3d的z值就越敏感。

2、旋转

body {
  perspective: 1000px;
}

img {
  transform: rotate3d(1, 0, 0, 45deg);
}

在开了父级的透视之后，用rotate3d就可以对物体进行旋转了，rotate3d的写法是前面三个参数是轴，后面是旋转的角度：
在这里插入图片描述

还有一个属性需要关注一下：transform-style
它有2个选项：
flat：这是默认值，指定的子元素位于此元素所在的平面内
preserve-3d：指定子元素位于三维空间内。
使用transform-style: preserve-3d;可以模拟更真实的3D转换。
以下是一个比较完整的例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 100px;
      height: 100px;
      transform: translate(100px, 100px);
      perspective: 500px;
    }

    .box {
      width: 100px;
      height: 100px;
      position: relative;
      transform-style: preserve-3d;
      transition: all .5s ease;
    }

    .box:hover {
      transform: rotateX(90deg);
    }

    .front,
    .bottom {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .front {
      z-index: 1;
      transform: translate3d(0, 0, 50px);
    }

    .bottom {
      filter: invert(100%);
      transform: translate3d(0, 50px, 0) rotateX(-90deg);
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="box">
      <img class="front" src="img/azhao.png">
      <img class="bottom" src="img/azhao.png">
    </div>
  </div>
</body>

</html>

CSS3D转换

在父级指定了perspective: 500px，然后在box层指定了 transform-style: preserve-3d，然后front和bottom分别摆好自己的位置和旋转。当鼠标悬浮在box上的时候，box自己转90度，然后就带动front和bottom一起转动了90度，得到了一个立体的效果。