如何使用css3實現3d立體特效-js教程-PHP中文網

如何使用css3實現3d立體特效

php中世界最好的语言

發布： 2018-03-14 14:56:07

原創

1682 人瀏覽過

這次帶給大家如何使用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中文網其它相關文章！