recherche

Maison >interface Web >tutoriel CSS >Étapes pour implémenter l'effet de suspension 3D en HTML

Étapes pour implémenter l'effet de suspension 3D en HTML

php中世界最好的语言
php中世界最好的语言original
2017-11-29 14:56:353355parcourir

Pour obtenir l'effet de suspension 3D, vous devez utiliser les nouveaux attributs de H5. Comment obtenir l'effet de suspension 3D ? Quelles sont les précautions pour obtenir l'effet suspension 3D ? Ce qui suit est un cas pratique, jetons-y un œil. 

<!DOCTYPE html>
<html>
         <head>
                   <meta charset="UTF-8">
                   <title></title>
                   <style>
                            *{margin: 0; padding: 0;}
                            ul,li{list-style: none;}
                            .container{perspective: 1300;-webkit-perspective:1300;}
                            .boxList{position:absolute;width: 630px;height:630px;left:50%;margin-left:-315px; -webkit-transform-style: preserve-3d;transform-style: preserve-3d;/*animation: a1 2s 1;*/transition: all 2s;}
                            .boxList li{float: left;width: 200px;height: 200px;margin:5px;background: darkcyan;-webkit-transition: all 0.3s;transition: all 0.3s;}
                            .on li:hover{-webkit-transform: translate3d(0,0,30px);transform: translate3d(0,0,30px);background:deepskyblue;box-shadow: 30px 30px 10px rgba(0, 0, 0, 0.5);}
                            .on{webkit-transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);}
                   </style>
         </head>
         <body>
                   <div>
                            <ul>
                                     <li></li>
                                     <li></li>
                                     <li></li>
                                     <li></li>
                                     <li></li>
                                     <li></li>
                                     <li></li>
                                     <li></li>
                                     <li></li>
                            </ul>
                   </div>
         </body>
         <script>
                   var list=document.querySelector(&#39;.boxList&#39;);
                   window.onload=function(){
                            setInterval(transition,1000)
                           
                   }
                   function transition(){
                            list.className=&#39;on boxList&#39;;
                   }
         </script>
</html>


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

Lecture connexe :

Comment utiliser CSS pour créer des effets de rotation d'image

Solution au problème de la couleur d'arrière-plan ne peut pas être affiché en HTML

Processus Js d'exploitation des objets DOM


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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée et exemples d'utilisation de l'attribut word-wrap en CSS3Article suivant：Explication détaillée et exemples d'utilisation de l'attribut word-wrap en CSS3

Articles Liés

Voir plus