CSS变形3D

最新推荐文章于 2024-08-28 23:58:56 发布

路痴先森

最新推荐文章于 2024-08-28 23:58:56 发布

阅读量76

点赞数

文章标签： css 3d 前端

本文链接：https://blog.csdn.net/qq_57162921/article/details/134033311

版权

1、父元素样式：

3D变化需要⽗元素设置样式才能保留3d的变化效果

保留3d变化：transform-style：preserve-3d; 默认值flat
设置视⻆深度（景深）：perspective [pǝ'spektiv] 设置当前⽹⻚的视距为800px，⼈眼距离⽹⻚的距离，一般不⼩于600px

有的浏览器 html{perspective: 800px; },
⼤多浏览器直接设置在⽗元素上，例如：perspective：800-1200px；⼀般为900px-1000px

2 、位移 :translate3d translateX translateY translateZ

translate3d(x,y,z):必须传递三个参数

translateX(x) translateY(y) translateZ(z) 参数单位为px

x值：沿着x轴向右，为正；沿着x轴向左，为负

y值：沿着y轴向下，为正；沿着y轴向上，为负

z值：沿着z轴向屏幕外，为正；沿着z轴向屏幕内，为负

3、旋转:rotate3d rotateX rotateY rotateZ

1. rotateX(⻆度) rotateY(⻆度) rotateZ(⻆度) 沿着元素中⼼点穿过的某个轴旋设置的⻆度

2. 参数⻆度单位为deg

3. ⻆度值：

rotateX 为正则顺时针旋转，为负则为逆时针旋转

rotateY 为正则逆时针旋转，为负则顺时针旋转

rotateZ 为正则顺时针旋转，为负则为逆时针旋转

4. 可以通过transform-origin：left来设置，⽐如绕着元素的左边框旋转

5. rotate3d（x,y,z,deg）:沿着⾃定义轴旋转deg为⻆度()

6. backface-visibility属性定义当元素旋转到背⾯向屏幕时，是否可⻅

visible 背⾯可⻅ hidden 背⾯不可⻅

4、缩放：scale3d scaleX scaleY scaleZ

scale3d(num,num,num):必须要传三个参数

scaleX(x) scaleY(y) scaleZ(z) ,分别代表x和y轴⽅向缩放相应的倍数

参数为数字，⽆单位

小猪佩奇3D相册

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小猪佩奇</title>
    <style>
    
      .cube {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        margin-top: 100px;
        /* 设置3d效果 */
        transform-style: preserve-3d;
        /* 设置景深 */
        /* perspective: 800px; */
        /* transform: rotateX(-45deg) rotateZ(-45deg); */
        animation: zhuan 20s infinite linear;
      }
      .cube > div {
        width: 200px;
        height: 200px;
        /* 为元素设置透明效果 */
        opacity: 0.7;
        position: absolute;
      }
      img {
        /* 消除中间的一条线 */
        vertical-align: top;
      }
      .box1 {
        transform: rotateY(90deg) translateZ(100px);
      }
      .box2 {
        transform: rotateY(-90deg) translateZ(100px);
      }
      .box3 {
        transform: rotateX(90deg) translateZ(100px);
      }
      .box4 {
        transform: rotateX(-90deg) translateZ(100px);
      }
      .box5 {
        transform: rotateY(180deg) translateZ(100px);
      }
      .box6 {
        transform: rotateY(0deg) translateZ(100px);
      }
      @keyframes zhuan {
        form {
          transform: rotateX(0deg) rotateZ(0deg);
        }
        to {
          transform: rotateX(360deg) rotateZ(360deg);
        }
      }
    </style>
  </head>
  <body>
    <!-- 创建外部容器 -->
    <div class="cube">
      <div class="box1">
        <img src="./img/1.jpeg" alt="" />
      </div>
      <div class="box2">
        <img src="./img/2.jpeg" alt="" />
      </div>
      <div class="box3">
        <img src="./img/3.jpeg" alt="" />
      </div>
      <div class="box4">
        <img src="./img/4.jpeg" alt="" />
      </div>
      <div class="box5">
        <img src="./img/5.jpeg" alt="" />
      </div>
      <div class="box6">
        <img src="./img/6.jpeg" alt="" />
      </div>
    </div>
  </body>
</html>