首页 >web前端 >js教程 >如何使用css3实现3d立体特效

如何使用css3实现3d立体特效

php中世界最好的语言原创: 2018-03-14 14:56:071782浏览

这次给大家带来如何使用css3实现3d立体特效，使用css3实现3d立体特效的注意事项有哪些，下面就是实战案例，一起来看一下。

其实css3中提供了很多让我们实现非常炫酷的工具，好多特效不需要通过复杂的js代码来实现，而可以通过简单的css3代码来实现，这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现。

要实现这个正当体盒子你要对css3的内容有基本的了解而且要具备css中基本的语法，css3中主要掌握的内容如下：

了解css3中的transform中的scale(伸缩),旋转rotate，以及平移translate等属性。
了解css3中动画的实现。
了解css3中过度的特效。

html中的代码特别简单，你只需要设置六个块元素，最重要的部分也是最核心的部分就是css3中的代码了，我将代码实现如下，具体实现的情况，我会在代码中添加注释。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    html{        background: radial-gradient(ellipse at center, #2A2A2A 0%, #000000 100%);        width: 100%;        height:100%;    }    .sence{        width: 600px;        height:600px;        position: fixed;        top: 0;        left:0;        right:0;        bottom:0;        margin: auto;    }    .box{        width: 300px;        height:300px;        position: relative;        transform-style: preserve-3d;        transform-origin: center center 75px;        /*允许改变转换元素的位置*/        animation:  myfirst 3s linear infinite ;        /*指的是匀速变化   并且原路返回*/alternate    }
    .box p{        width: 100%;        height:100%;        position: absolute;        top:0;        left:0;        border-radius: 5px;        transform-style: preserve-3d;        box-shadow: 0 0 30px 5px #fff;        opacity: 0.8;    }    @keyframes myfirst {        from {            transform:  skew(0) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);        }        to {            transform: skew(0deg) translate3d(10px,20px,30px) rotateX(360deg) rotateY(360deg) rotateZ(90deg);        }    }    .box p:nth-child(1){        background-image: url(img/psbe5ZDRJYLJ.jpg);/*照片可以另行添加，也可以换成背景色*/        background-size: 300px 300px;        transform-origin: top;        transform: rotateX(90deg);    }    .box p:nth-child(2){        background-image: url(img/psbe7VL5XVBF.jpg);        background-size: 300px 300px;        transform-origin:left;        transform: rotateY(-90deg);    }    .box p:nth-child(3){     background-image: url(img/psbeL8Q5LRIN.jpg);     background-size: 300px 300px;    }    .box p:nth-child(4){        background-image: url(img/psbeNEXVJIFI.jpg);        background-size: 300px 300px;        transform-origin:right;        transform: rotateY(90deg);    }    .box p:nth-child(5){        background-image: url(img/psbeUIJ7FZJ6.jpg);        background-size: 300px 300px;        transform-origin: bottom;        transform: rotateX(-90deg);    }    .box p:nth-child(6){        background-image: url(img/psbR3FYMIPK.jpg);        background-size: 300px 300px;        transform: translateZ(300px);    }</style><body><p class="sence">    <p class="box">        <p>        </p>        <p>                 </p>        <p>                    </p>        <p>                   </p>        <p>        </p>        <p>                 </p>    </p></p></body></html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！