3D、

3d的效果通过需要远距离观察才能看出立体效果，因为距离太近，我们只能看出平面的2d效果，这就需要在设置3d变换效果之前，需要先设置景深：

 同时，我们还需要设置从屏幕的哪个点来观察屏幕内部的3d效果：

 对于3d的效果来讲，同样具有平移和旋转，但因为平移和旋转同样适用于2d效果，所以我们还需要告诉浏览器当前场景是在3d效果下进行的：

旋转、

语法：

 平移、

语法：

 例、

<style>
    .box{
        width: 500px;
        height: 500px;
        border:1px solid #000;
        perspective: 1200px;
        perspective-origin: 50% 50%;
        transform-style: preserve-3d;
        margin: 50px auto;
        position:relative;
    }
    .box .small{
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        left: 0;
        top: 0;bottom: 0;
        right: 0;
        margin: auto;
        transition: all 3s;
    }
    .box:hover .small{
        /* z轴平移，正数表示距离实现更近 */
        /* transform: translateZ(-300px); */

        /* x轴平移，正数向右 */
        /* transform: translateX(100px); */

        /* y轴平移，正数向下 */
        /* transform: translateY(100px); */


        /* x轴旋转，正角度向后倒 */
        /* transform: rotateX(45deg); */

        /* y轴旋转，正角度右边向后 */
        /* transform: rotateY(45deg); */

        /* 正角度右边向下 */
        /* transform: rotateZ(45deg); */
    }
</style>
<div class="box">
    <div class="small"></div>
</div>

动画、

定义动画、

 使用动画、

例、

<style>
/* 定义动画 */
/* @keyframes 哈哈{ */
    /* 定义关键帧 */
    /* 初始位置 */
    /* 0%{ css样式 } */
    /* from{ css样式 } */

    /* 中间的关键帧 - 使用百分比 */
    /* 50%{} */

    /* 结束位置 */
    /* 100%{} */
    /* to{} */
/* } */

.box{
    width: 800px;
    height: 300px;
    border: 1px solid #000;
}
.small{
    width: 100px;
    height: 100px;
    background-color: #f00;
    margin-top: 100px;
    animation: wid 3s infinite alternate;
}
@keyframes wid{
    to{
       margin-left: 650px;
       transform: scale(2) rotate(720deg); 
    }
}
.box:hover .small{
    /* 使用动画 */
    /* animation: 动画名称 需要的时长; */

    /* animation: xuanzhuan 5s; */

    /* 指定动画名称 */
    /* animation-name: wid; （动画名称中英文都可以）*/

    /* 指定动画时长 */
    /* animation-duration: 5s; */
    /* animation-duration: 1s; */

    /* 指定速度方式 */
    /* animation-timing-function: linear; */

    /* 指定延迟的时间 */
    /* animation-delay: 2s; */

    /* 指定动画执行的次数 */
    /* animation-iteration-count: 1; */
    /* animation-iteration-count: infinite; */

    /* 指定动画的执行方向：direction */
    /* animation-direction: alternate; */
    /* 
        normal：正方向执行结束后重新回到原点重新开始
        alternate：正方向执行结束，会反方向动画回来
    */

    /* 设置标签元素动画结束后是否停在开始位置或结束位置 */
    /* animation-fill-mode: none; */
    /*
    forwards让标签元素停留在动画结束位置
    none动画结束后元素回到初始位置
    */

    /* 设置动画是运行还是停止 */
    animation-play-state: paused;
}
</style>
<div class="box">
    <div class="small"></div>
</div>