空间位移和立体图形的基本知识空间是从坐标轴角度定义的。x,y和z三条坐标轴构成一个立体空间，z轴位置与视线方向相同。空

空间位移

**空间：**是从坐标轴角度定义的。x,y和z三条坐标轴构成一个立体空间，z轴位置与视线方向相同。

空间转换也叫3D转换

属性： transform

语法：

tranform:translate3d(x,y,z);
tranform:translateX(值);
transform:translateY(值);
transform:translateZ(值);

取值：

正负值均可
像素单位数值
百分比

透视

属性

perspective:值（视距）；
取值：像素单位数值
透视距离也称为视距

作用：

空间转换时，为元素添加近大远小，近实远虚的视觉效果

注意：

数值一般在800-1200
要给需要透视元素的父级元素添加该属性
视距就是人眼睛到屏幕的距离，超过这个距离时就看不见了

为什么要使用透视效果：

z轴是视线方向，移动效果应该是距离的远或近，但是我们电脑屏幕是平面的，无法观察到效果。故此需要透视效果。

    <style>
      /* 
      视距
      设置 人的眼睛到被观察物体之前的距离 

      如何去使用
      1 代码规范  要给被观察的物体的父元素使用！！ 
       */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        /* 视距  一般随意的设置1000 当z轴正轴变化超过这个值时就看不见了*/
        perspective: 1000px;
      }
      div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        /* transform: translateZ(500px); */

        /* 两行代码是等价的！！  */
        transform: translateX(100px) translateY(100px) translateZ(100px);
        transform: translate3d(100px, 100px, 100px);
      }
    </style>
    <div>空间位移</div>

空中旋转

判断旋转的方向：

左手握住旋转轴，拇指指向正值得方向，手指弯曲方向为旋转正值方向

语法：

**Z轴旋转：**transform:rotateZ(角度)

代码示例：

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 200px;
        height: 200px;
        background-color: aqua;

        margin: 200px auto;

        /* 沿着Z轴做旋转 */
        transform: rotateZ(0deg);
      }
</style>
<div>旋转</div>

**X轴旋转：**transform:rotateX(角度)

代码示例：

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: #666;
        text-align: center;
        padding-top: 300px;
        /* 
        元素近大远小 效果 
        视距 p 
        视距属性 要给被观察的元素添加 
         */

        perspective: 1000px;
      }
      img {
        transform: rotateX(0deg);
        transition: 2s;
      }
      img:hover {
        transform: rotateX(360deg);
      }
</style>
<img src="图片地址" alt="" />

**Y轴旋转:**transform:rotateY(角度)

代码示例：

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: #666;
        text-align: center;
        padding-top: 300px;
        perspective: 1000px;
      }
      img {
        transform: rotateY(0deg);
        transition: 2s;
      }
      img:hover {
        transform: rotateY(360deg);
      }
</style>
<img src="图片地址" alt="" />

**沿着多条对称轴旋转：**transform:rotate3d(x,y,z,角度)

通过设置不同轴的坐标值就能是之沿着不同的轴旋转

代码示例：

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: #666;
        text-align: center;
        padding-top: 300px;
        perspective: 1000px;
      }
      img {
        /* 沿着任意的方向做方向 */
        /* transform: rotate3d(x,y,z,角度); */

        /* 矢量 两个点 可以确定方向还有长度！  */

        /* transform: rotate3d(x坐标,y坐标,z坐标,角度); */

        /* transform: rotate3d(1, 1, 0, 30deg); */
        /* transform: rotate3d(2, 1, 0, 30deg); */
        transform: rotate3d(1, 1, 1, 30deg);
      }
</style>
<img src="./images/pk1.png" alt="" />

立体呈现

使用perspective透视属性不能呈现立体图形，只能增加近大远小，近实远虚的视觉效果

实现方法：

添加transform-style:preserve-3d
使子元素处于真正的3d空间

实现立体图形的步骤：

给盒子父元素添加transform-style:perserve-3d;
按需求设置盒子的位置（位移或者旋转）

**注意：**空间内，转换元素都有自己独立的坐标轴，互不干扰

使用transform-style属性实现立方体案例

思路：

定一个父盒子box包装着6个小平面
使用定位把六个面叠在一起，并给每个面设置不同的颜色
使用空间变换来实现立方体，就是吧每个没移到对应的位置
- 前： z轴正移动 +100
- 后： z轴负移动 -100
- 左： x轴负移动 -100 y轴旋转 90deg
- 右： x轴正移动 100 y轴旋转 90deg
- 上： y轴负移动 -100 x轴旋转 90deg
- 下： y轴正移动 100 x轴旋转 90deg
给box开启立体效果，并旋转box查看效果

代码示例：

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        perspective: 1000px;
      }

      .box {
        /* 
        css3  3d层面 挺 酷炫 新的技术 
        浏览器 遗留下来的bug 对待！！ 
         */
        width: 200px;
        height: 200px;
        position: relative;
        margin: 200px auto;

        /* 开启立体空间 */
        transform-style: preserve-3d;

        /* 任意轴 旋转 */
         transform: translateZ(300px) rotate3d(1, 1, 1, 60deg);
        /* transform: translateZ(0px); */
        transition: 2s;
      }
      .box div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* opacity: 0.8; */
      }

      .front {
        background-color: salmon;

        /*  z轴 正 移动   +100 */
        transform: translateZ(100px);
      }
      .back {
        /*  z轴 负 移动   -100 */
        transform: translateZ(-100px);
        background-color: seagreen;
      }
      .left {
        transform: translateX(-100px) rotateY(90deg);
        background-color: lawngreen;
      }
      .right {
        transform: translateX(100px) rotateY(90deg);
        background-color: yellow;
      }
      .up {
        background-color: aqua;
        transform: translateY(-100px) rotateX(90deg);
      }
      .bottom {
        transform: translateY(100px) rotateX(90deg);
        background-color: purple;
      }
</style>
 <div class="box">
      <div class="front">前</div>
      <div class="back">后</div>
      <div class="left">左</div>
      <div class="right">右</div>
      <div class="up">上</div>
      <div class="bottom">下</div>
</div>

扩展渐变与过渡

渐变没有什么过渡效果
背景图片渐变效果不是很完善
不管就想要实现鼠标移入图片切换的渐变的过程！！
1. 换另外的思路来实现这个功能！！ div 里面包装两个图片标签
2. 先让一个图片隐藏一个图片显示
3. div hover 再让另外一个图片隐藏另外一个图片显示！
4. 定位加透明度来实现透明度有过渡
display:none 渐变背景图片没有过渡效果 none black

空间位移和立体图形的基本知识

空间位移

空中旋转

立体呈现

扩展 渐变与过渡

扩展渐变与过渡