Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Demo: home page for free source code

​

Code directory:

​

Main code implementation:

Partial CSS styles:

background: url(.. /img/s3.jpg); background-size: 100% 100%; Opacity: 0.8; transform: rotateY(90deg) translateZ(200px); } .box .box1 .left { background: url(.. /img/s4.jpg); background-size: 100% 100%; Opacity: 0.8; transform: rotateY(-90deg) translateZ(200px); } .box .box1 .top { background: url(.. /img/s5.jpg); background-size: 100% 100%; Opacity: 0.8; transform: rotateX(90deg) translateZ(200px); } .box .box1 .bottom { background: url(.. /img/s6.jpg); background-size: 100% 100%; Opacity: 0.8; transform: rotateX(-90deg) translateZ(200px); } / * � � � � Ч � � * /. Box. Box1: hover. The font {background: url (.. /img/s1.jpg); background-size: 100% 100%; Opacity: 0.4; transition-duration: 1s; transform: translateZ(400px); } .box .box1:hover .back { background: url(.. /img/s2.jpg); background-size: 100% 100%; Opacity: 0.4; transition-duration: 1s; transform: translateZ(-400px) rotateY(180deg); } .box .box1:hover .right { background: url(.. /img/s3.jpg); background-size: 100% 100%; Opacity: 0.4; transition-duration: 1s; transform: rotateY(90deg) translateZ(400px); } .box .box1:hover .left { background: url(.. /img/s4.jpg); background-size: 100% 100%; Opacity: 0.4; transition-duration: 1s; transform: rotateY(-90deg) translateZ(400px); } .box .box1:hover .top { background: url(.. /img/s5.jpg); background-size: 100% 100%; Opacity: 0.4; transition-duration: 1s; transform: rotateX(90deg) translateZ(400px); }Copy the code

HTML code:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title> heroes </title> <link rel="stylesheet" type="text/ CSS" href="css/style.css"> </head> <body> <audio class="audio-player" id="video1" autoplay muted loop> <source src="881840.ogg" type="audio/mpeg"> </audio> <div class="box"> <div class="box1"> <div class="font"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> <i class="i-font"></i> <i class="i-back"></i> <i class="i-top"></i> <i class="i-bottom"></i> <i class="i-left"></i> <i class="i-right"></i> </div> </div> <script> document.body.addEventListener('mousedown', function() { var video1 = document.getElementById("video1") video1.muted = false; video1.load(); video1.play(); }, false); </script> </body> </html>Copy the code

Special effects collected in the network, infringement deletion

Check the main page of the blogger to get the latest clocked articles **40 ** / 100 days

You can like, collect, pay attention to, comment on me, need to complete the document at any time contact me or exchange yo ~!

​

​