Comment utiliser CSS3 pour obtenir des effets stéréoscopiques 3D-js tutoriel-php.cn

Comment utiliser CSS3 pour obtenir des effets stéréoscopiques 3D

php中世界最好的语言

Libérer： 2018-03-14 14:56:07

original

1812 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser CSS3 pour obtenir des effets spéciaux tridimensionnels 3D. Quelles sont les précautions pour utiliser CSS3 pour obtenir des effets spéciaux tridimensionnels 3D. Voici des cas pratiques. jetez un oeil.

En fait, CSS3 fournit de nombreux outils qui nous permettent de réaliser des choses très sympas. De nombreux effets spéciaux n'ont pas besoin d'être réalisés via un code JS complexe, mais peuvent être réalisés via un simple code CSS3. vous le présentera. Parlons de la mise en œuvre de la boîte 3D et de l'animation.

Pour réaliser cette box légitime, vous devez avoir une compréhension de base du contenu du css3 et maîtriser la syntaxe de base en css. Les principaux contenus à maîtriser en css3 sont les suivants :

Comprendre les propriétés de mise à l'échelle, de rotation et de traduction en transformation en CSS3.
Découvrez l'implémentation de l'animation en CSS3.
Comprendre les effets spéciaux excessifs en CSS3.

Le code en HTML est très simple. Il vous suffit de définir six éléments de bloc. La partie la plus importante et la plus centrale est le code en CSS3. implémentation spécifique, j'ajouterai des commentaires dans le code.

<!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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée du modèle de constructeur des modèles de conception JS

Pourquoi le front-end devrait-il utiliser la modularité ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!