Heim > Artikel > Web-Frontend > So zeigen Sie Produktinformationen mit 3D-Effekt in H5+C3 an

So zeigen Sie Produktinformationen mit 3D-Effekt in H5+C3 an

php中世界最好的语言Original: 2018-03-26 14:03:135569Durchsuche

Dieses Mal zeige ich Ihnen, wie H5+C3 Produktinformationen mit 3D-Effekt anzeigt. Welche Vorsichtsmaßnahmen gelten für H5+C3, um Produktinformationen mit 3D-Effekt anzuzeigen? . Verbessern Sie die Verwendung von Perspektive und transform:translateZ. Herkömmliche Produktpräsentationen können die Aufmerksamkeit der Benutzer möglicherweise nicht sehr gut erregen, aber wenn Sie der Anzeige geeignete 3D-Elemente hinzufügen, ist der Effekt möglicherweise gut ~

Rendering:

Lassen Sie mich erklären: Diese Idee ist nicht meine Idee, ha~ ich ahme andere nach, die Idee sollte von w3cplus stammen. Natürlich geht es darum, Ihnen beizubringen, wie es geht, genau wie bei einer hohen Imitation~

Zunächst zeigen wir Ihnen, wie Sie mit CSS3 einen Würfel erstellen:

Im Wald Vor CSS sollte es schwierig sein, einen solchen Würfel herzustellen~ Nun, ich denke, es ist schwierig~

html:

wapper ist die Bühne Für diesen Effekt, also das Element, das die Perspektive festlegt, ist der Effekt, wenn mehrere Elemente eine Bühne teilen, unterschiedlich, wenn alle Elemente aus einer Blickrichtung betrachtet werden, was dem Stehen vor einer Reihe geneigter Türen entspricht Bei 45 Grad hat jede Tür einen anderen Blickwinkel als unsere Sichtlinie.

<body>  
  
  
<p class="wapper">  
    <p class="cube">  
        <p class="side  front">1</p>  
        <p class="side   back">6</p>  
        <p class="side  right">4</p>  
        <p class="side   left">3</p>  
        <p class="side    top">5</p>  
        <p class="side bottom">2</p>  
    </p>  
</p>  
  
</body>

p#cube legt „transform-style:preserve-3d“ fest und legt dann „rotate“ und „translateZ“ für jedes Element fest

Da sich nun alle Flächen auf derselben Ebene überlappen, lassen wir Folgendes:

Bewegen Sie die Schriftart um die halbe Seitenlänge (translateZ(50px)) in Richtung der Z-Achse nach vorne, was 50px entspricht.

Zuerst um 180 Grad um die Y-Achse drehen, sodass die Schriftart nach vorne zeigt die Außenseite und dann translatorZ (50px), da es zu diesem Zeitpunkt um 180 Grad gedreht wurde, also ist tanslateZ nach unten

In ähnlicher Weise werden andere Oberflächen um 90 Grad um die X-Achse oder Y-Achse gedreht. und dann translatorZ(50px)

CSS:

Für den Anzeigeeffekt können Sie den perspektivischen Abstand anpassen~

.wapper  
       {  
           margin: 100px auto 0;  
           width: 100px;  
           height: 100px;  
           -webkit-perspective: 1200px;  
           font-size: 50px;  
           font-weight: bold;  
           color: #fff;  
       }  
  
       .cube  
       {  
  
           position: relative;  
           width: 100px;  
           -webkit-transform: rotateX(-40deg) rotateY(32deg);  
           -webkit-transform-style: preserve-3d;  
       }  
  
       .side  
       {  
           text-align: center;  
           line-height: 100px;  
           width: 100px;  
           height: 100px;  
           background: rgba(255, 99, 71, 0.6);  
           border: 1px solid rgba(0, 0, 0, 0.5);  
           position: absolute;  
       }  
  
       .front  
       {  
           -webkit-transform: translateZ(50px);  
       }  
  
       .top  
       {  
           -webkit-transform: rotateX(90deg) translateZ(50px);  
       }  
  
       .right  
       {  
           -webkit-transform: rotateY(90deg) translateZ(50px);  
       }  
  
       .left  
       {  
           -webkit-transform: rotateY(-90deg) translateZ(50px);  
       }  
  
       .bottom  
       {  
           -webkit-transform: rotateX(-90deg) translateZ(50px);  
       }  
  
       .back  
       {  
           -webkit-transform: rotateY(-180deg) translateZ(50px);  
       }

Okay, wenn Sie den Würfel verstehen, dann Diese Produktdarstellung wird nicht schwierig sein; die beiden p stellen jeweils zwei Seiten dar, eine ist das Bild und die andere ist die Einleitung. Zunächst wird die Einleitung um 90 Grad um die X-Achse gedreht, und wenn die Maus dann bewegt wird, wird sie vollständig angezeigt Die Box wird um 90 Grad um die X-Achse gedreht.

HTML:

CSS wurde im Wesentlichen oben analysiert. Wir haben für jedes Produkt eine .wapper-Datei erstellt Scheint überflüssig zu sein, ist es aber nicht. Da wir möchten, dass jedes Produkt ein normaler 90-Grad-Flip ist, können wir nicht zulassen, dass sich alle Produkte eine Bühne teilen. Deshalb haben wir einen p.wapper hinzugefügt, damit er transform-style: preverse -3d festlegen kann , und legen Sie dann die Bühneneffektperspektive für jedes Li separat fest. Der letzte Flip-Effekt ist auf p.wapper.

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <meta charset="utf-8">  
    <link href="css/reset.css" rel="stylesheet" type="text/css">  
  
      
</head>  
<body>  
  
  
<ul id="content">  
  
    <li>  
        <p class="wrapper">  
            <img src="images/a.png">  
            <span class="information">  
              <strong>Contact Form</strong> The easiest way to add a contact form to your shop.  
            </span>  
        </p>  
    </li>  
  
    <li>  
        <p class="wrapper">  
            <img src="images/b.jpeg">  
            <span class="information">  
              <strong>Contact Form</strong> The easiest way to add a contact form to your shop.  
            </span>  
        </p>  
  
    </li>  
  
    <li>  
        <p class="wrapper">  
            <img src="images/c.png">  
            <span class="information">  
              <strong>Contact Form</strong> The easiest way to add a contact form to your shop.  
            </span>  
        </p>  
  
    </li>  
  
</ul>  
  
  
</body>  
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

<style type="text/css">  
        body  
        {  
            font-family: Tahoma, Arial;  
        }  
  
        #content  
        {  
            margin: 100px auto 0;  
        }  
  
        #content li, #content .wrapper, #content li img, #content li span  
        {  
            width: 310px;  
            height: 100px;  
        }  
  
        #content li  
        {  
            cursor: pointer;  
            -webkit-perspective: 4000px;  
            width: 310px;  
            height: 100px;  
            float: left;  
            margin-left: 60px;  
            /*box-shadow: 2px 2px 5px #888888;*/  
  
        }  
  
        #content .wrapper  
        {  
            position: relative;  
            -webkit-transform-style: preserve-3d;  
            -webkit-transition: -webkit-transform .6s;  
        }  
  
        #content li img  
        {  
            top: 0;  
            border-radius: 3px;  
            box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);  
            position: absolute;  
            -webkit-transform: translateZ(50px);  
            -webkit-transition: all .6s;  
        }  
  
        #content  li span  
        {  
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(236, 241, 244, 1)), color-stop(100%, rgba(190, 202, 217, 1)));  
            text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);  
            position: absolute;  
            -webkit-transform: rotateX(-90deg) translateZ(50px);  
            -webkit-transition: all .6s;  
            display: block;  
            top: 0;  
            text-align: left;  
            border-radius: 15px;  
            font-size: 12px;  
            padding: 10px;  
            width: 290px;  
            height: 80px;  
            text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);  
            box-shadow: none;  
        }  
  
        #content li span strong  
        {  
            display: block;  
            margin: .2em 0 .5em 0;  
            font-size: 20px;  
            font-family: "Oleo Script";  
        }  
  
        #content li:hover .wrapper  
        {  
            -webkit-transform: rotateX(95deg);  
        }  
  
        #content li:hover img  
        {  
            box-shadow: none;  
            border-radius: 15px;  
        }  
  
        #content li:hover span  
        {  
            box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);  
            border-radius: 3px;  
        }  
  
  
    </style>

Empfohlene Lektüre:

Wie H5 die Einschränkungsüberprüfungs-API verwendet

postMessage zur domänen- und fensterübergreifenden Implementierung Nachrichten

Das obige ist der detaillierte Inhalt vonSo zeigen Sie Produktinformationen mit 3D-Effekt in H5+C3 an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：H5+WebSocket lädt mehrere Dateien gleichzeitig hochNächster Artikel：H5+WebSocket lädt mehrere Dateien gleichzeitig hoch

In Verbindung stehende Artikel

Mehr sehen