CSS 内容总结(八)3D转换

最新推荐文章于 2024-09-29 21:43:16 发布

辛跃

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量101

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_47735503/article/details/114415518

版权

CSS 内容总结

1.三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的

x轴：水平向右注意：x右边是正值，左边是负值
y轴：垂直向下注意：y下面是正值，上面是负值
z轴：垂直屏幕注意：往外面是正值，往里面是负值

2.3D位移

3D移动在2D移动的基础上多加了一个可以移动的方向，就是Z轴方向

translform:translateX(100px):仅仅是在x轴上移动
translform:translateY(100px):仅仅是在y轴上移动
translform:translateZ(100px):仅仅是在z轴上移动（单位一般为px）
translform:translate3d(x,y,z):在xyz上移动

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: rgb(161, 20, 20);
      transform: translate3d(100px, 100px, 100px)
      /* transform: translate3d(0, 100px, 100px); x轴不赋值也不能省略*/
    }
  </style>
</head>

<body>
  <div></div>
</body>

3.透视perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的

透视也可称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视单位是像素

透视写在被观察元素的父盒子上面的

d：就是视距，视距就是人的眼睛到屏幕的距离（perspective：200px）

z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大

在这里插入图片描述

4.translateZ

<style>
    body {
      perspective: 200px;
    }

    div {
      width: 200px;
      height: 200px;
      background-color: rgb(161, 20, 20);
      margin: 0 auto;
      transform: translateZ(100px);   
    }
  </style>
</head>

<body>
  <div></div>
</body>

5.3D旋转

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

语法：左手法则：大拇指指向正方向

translform:rotateX(100deg):沿着x轴正方向旋转45度
translform:rotateY(100deg):沿着y轴正方向旋转45度
translform:rotateZ(100deg):沿着z轴正方向旋转45度
translform:rotate3d(x,y,z,deg):沿着自定义轴旋转

 <style>
    body {
      background-color: rgb(160, 113, 113);
      perspective: 200px;
    }

    img {
      display: block;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transition: all 1s;
    }

    img:hover {
      transform: rotateX(180deg);
      /*transform: rotateX(180deg);
      transform: rotateX(180deg);
      transform: rotate3d(1,1,0,120deg);沿着x轴和y轴 则沿着对角线翻转
        */
    }
  </style>
</head>

<body>
  <img src="img/ti.png" alt="">
</body>

6.3D呈现transform-style

控制子元素是否开启三维立体环境
transform-style：flat 默认；元素不开启3d空间
transform-style：preserve-3d；子元素开启立体空间
代码写给父级，但是影响的是子盒子
这个属性很重要

  <style>
    body {
      perspective: 200px;
    }

    .box {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transform-style: preserve-3d;
      transition: all 1s;
    }

    .box:hover {
      transform: rotateY(65deg);
    }

    .box div {
      position: absolute;
      width: 200px;
      height: 200px;
    }

    .box div:first-child {
      background-color: rgb(139, 235, 167);
    }

    .box div:last-child {
      background-color: rgb(139, 200, 235);
      transform: rotateX(45deg);
    }
  </style>
</head>

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

在这里插入图片描述

案例：盒子翻转

<!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>Document</title>
  <style>
    body {
      perspective: 200px;
    }

    .box {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transition: all 1s;
      transform-style: preserve-3d;
      background-color: rgb(121, 61, 61);
    }

    .box:hover {
      transform: rotateY(180deg);
    }

    .front,
    .back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      text-align: center;
      line-height: 200px;
    }

    .front {
      background-color: rgb(139, 235, 167);
      z-index: 1;
    }

    .back {
      background-color: rgb(139, 200, 235);
      transform: translateZ(-1px)rotateY(180deg);
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="front">猜猜我在哪</div>
    <div class="back">找到了</div>
  </div>
</body>

</html>

在这里插入图片描述

<!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>Document</title>
  <style>
    .box {
      width: 500px;
      height: 65px;
      /* perspective: 200px; */
    }

    .box>div {
      float: left;
      width: 100px;
      height: 20px;
      margin: 20px 10px;

      text-align: center;
      line-height: 20px;
      transform-style: preserve-3d;
      transition: all .5s;
    }

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

    .box .child2 {
      background-color: rgb(230, 174, 235);
      transform: translateY(10px)rotateX(-90deg);
    }

    .box div[class^='box1'] {
      position: relative;
    }

    .box .child1 {
      background-color: rgb(174, 235, 227);
      transform: translateZ(10px);
      z-index: 1;
    }

    .child1,
    .child2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box11">
      <div class="child1">xinyue</div>
      <div class="child2">hello</div>
    </div>
    <div class="box12">
      <div class="child1">xinyue</div>
      <div class="child2">hello</div>
    </div>
    <div class="box13">
      <div class="child1">xinyue</div>
      <div class="child2">hello</div>
    </div>
    <div class="box14">
      <div class="child1">xinyue</div>
      <div class="child2">hello</div>
    </div>
  </div>
</body>

</html>