css基础篇-3D变换

一、旋转

// css
	 /*
        过渡：某一个值变化的时候会有一个过渡的时间，不会显得很突兀
        渐变：多重颜色在一起的时候，颜色与颜色之间不会有明显的分割线，会主机变化
        2D/3D变幻：元素在2D平面/3D空间的变化
      */
      .div-rotate{
        height:200px;
        width: 200px;
        font-size: 40px;
        line-height:  200px;
        text-align: center;
        color: white;
        background-color: blue;
        transition: 10s linear all;
      }
      // x轴旋转
      .rotateX:hover {
          -webkit-transform: rotateX(3600deg);
      }
	  // y轴旋转
      .rotateY:hover {
          transform: rotateY(3600deg);
      }
 	  // z轴旋转
      .rotateZ:hover {
          transform: rotateZ(3600deg);
      }
// html

<div class="rotateX div-rotate">rotateX</div>
<div class="rotateY div-rotate">rotateY</div>
<div class="rotateZ div-rotate">rotateZ</div>

1、rotateX 旋转效果

2、rotateY 旋转效果

3、rotateZ 旋转效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020100109095962.gif#pic_center

---

二、立方效果

// css 
  /*景深层*/
      .jingshen {
          /*景深  我们眼睛到3D容器Z面的一个距离*/
          perspective: 1200px;
          /*不同的位置看同一个东西看到的形状是不一样的 perspective-origin可以调整我们眼睛的位置*/
          perspective-origin: 200px 200px;
          background: #12ffff;
          width: 800px;
      }

      .box {
          /*设置box 为3D容器（普通的div 只能展示2D的内容 设置preserve-3d后就变成一个3D容器）*/
          transform-style: preserve-3d;
          /*background-color: lightgray;*/
          position: relative;
          height: 500px;
          transition: 5s linear all;
          /*旋转的时候让沿着哪个点去旋转*/
          transform-origin: 200px 0px;
          margin-left: 100px;
      }

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

      div div div {
          width: 200px;
          height: 200px;
          position: absolute;
          top: 100px;
          left: 100px;
          opacity: 0.7;
          text-align: center;
          line-height: 200px;
          color: #fff;
          font-size: 40px;
      }

      .reddiv {
          background-color: red;
          transform-origin: 0px 0px;
          transform: rotateX(90deg);
      }

      .bluediv {
          background-color: blue;
          transform-origin: 0px 0px;
          transform: rotateY(-90deg);
      }

      .greendiv {
          background-color: green;
          transform-origin: 0px 200px;
          transform: rotateX(-90deg);
      }

      .golddiv {
          background-color: gold;
          transform-origin: 200px 0px;
          transform: rotateY(90deg);
      }

      .purplediv {
          background-color: purple;
          transform: translateZ(200px);
      }

      .pinkdiv {
          background-color: pink;
      }
// html
//<!-- 想要用平面去展示3D的效果 需要用到3层
//1、景深层（jingshen）
//2、3D容器层（box）
//3、容器内的元素（六个小div）
// -->
<div class="jingshen">
  <div class="box">
    <div class="reddiv">1</div>
    <div class="bluediv">2</div>
    <div class="greendiv">3</div>
    <div class="golddiv">4</div>
    <div class="purplediv">5</div>
    <div class="pinkdiv">6</div>
  </div>
</div>

效果图