前端小林

导航

css空间转换transform 3D

空间转换(三维)transform 3D

平移

  • transform:translateZ()
    • z轴是指垂直屏幕向外的轴
    • 可以实现z轴方向的位置便宜
    • z轴偏移正值是屏幕向外的反向,负值是屏幕向内的反向
  • transform:translate3d(x,y,z)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>空间位移</title>
  <style>
      /* 父容器需要添加perspective属性才可以看到变换效果 */
    body {
      perspective: 1000px;
    }
	
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: skyblue;
      transition: all 0.5s;
    }

    .box:hover {
      transform: translateZ(100px);
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

透视(视距)

  • perspective:800~1200px
  • 就是指人眼观察物体的距离,取值一般为800~1200px

旋转

  • transform:rotateZ()

    平面旋转就是围绕Z轴旋转

  • transform:rotateX()

  • transform:rotateY()

  • transform:rotate3d(x,y,z,deg)

    x,y,z的作用是描述一个方向,一个向量

  • 左手定则---大拇指沿着轴的正方向,手指环绕方向就是正值

3d呈现

  • transform-style:preserve-3d

    作用:默认情况下,子元素的3d效果并不会保留下来,如果需要保留,需要在父容器中设置这个样式

立方体

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>立方体</title>
  <style>
    body {
      /* 让元素呈现近大远小 */
      perspective: 1000px;
    }

    .box {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 200px auto;
      /* 让子元素保留3d效果transform-style: preserve-3d */
      transform-style: preserve-3d;
      transform: rotate3d(1, 1, 0, -30deg);
      transition: all 10s;
    }

    .box:hover {
      transform: rotate3d(1, 1, 0, -3000deg);
    }

    .face {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: red;
      line-height: 200px;
      text-align: center;
      font-size: 30px;
    }

    .face:nth-child(1) {
      background-color: rgba(0, 255, 0, 0.4);
      transform: translateZ(100px);
    }

    .face:nth-child(2) {
      background-color: rgba(0, 255, 255, 0.4);
      transform: translateZ(-100px) rotateY(180deg);
    }

    .face:nth-child(3) {
      background-color: rgba(255, 0, 0, 0.4);
      transform: translateX(-100px) rotateY(-90deg);
    }

    .face:nth-child(4) {
      background-color: rgba(255, 255, 0, 0.4);
      transform: translateX(100px) rotateY(90deg);
    }

    .face:nth-child(5) {
      background-color: rgba(255, 192, 203, 0.4);
      transform: translateY(-100px) rotateX(90deg);
    }

    .face:nth-child(6) {
      background-color: rgba(0, 0, 255, 0.4);
      transform: translateY(100px) rotateX(-90deg);
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="face">1</div>
    <div class="face">2</div>
    <div class="face">3</div>
    <div class="face">4</div>
    <div class="face">5</div>
    <div class="face">6</div>
  </div>
</body>

</html>

缩放

  • scale3d()

    没啥用

posted on 2022-03-04 20:06  前端小林  阅读(140)  评论(0编辑  收藏  举报