Schritte zum Implementieren des 3D-Aufhängungseffekts in HTML-CSS-Tutorial-php.cn

Schritte zum Implementieren des 3D-Aufhängungseffekts in HTML

php中世界最好的语言

Freigeben： 2017-11-29 14:56:35

Original

3306 Leute haben es durchsucht

Um den 3D-Aufhängungseffekt zu erzielen, müssen Sie die neuen Attribute von H5 nutzen. Wie erreicht man den 3D-Aufhängungseffekt? Was sind die Vorsichtsmaßnahmen, um den 3D-Federungseffekt zu erzielen? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie CSS, um Bildrotationseffekte zu erstellen

Lösung für das Problem der Hintergrundfarbe kann nicht in HTML angezeigt werden

Js Prozess zur Bedienung von DOM-Objekten

Das obige ist der detaillierte Inhalt vonSchritte zum Implementieren des 3D-Aufhängungseffekts in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!