โ ค้ ด แ ม ว

ตอนที่ 64 : (T h e c a t*) ; Effect ภาพม้าหมุน จะเรียกไงดี (?)

` The cat โค้ดแมวๆ ●

นำโค้ดไปใช้ อย่าลืม คอมเม้น ในตอนนี้เลย
และ อย่าลืม ติดเครดิต ร้านโค้ดแมวๆ ด้วยน้า
 

CRY   .q

CODE

<section id="slideshow"> <div class="entire-content"> <div class="content-carrousel"> <figure class="shadow"><img src="ใส่URLภาพ"></figure> <figure class="shadow"><img src="ใส่URLภาพ"></figure> <figure class="shadow"><img src="ใส่URLภาพ"></figure> <figure class="shadow"><img src="ใส่URLภาพ"></figure> <figure class="shadow"><img src="ใส่URLภาพ"></figure> <figure class="shadow"><img src="ใส่URLภาพ"></figure> <figure class="shadow"><img src="ใส่URLภาพ"></figure> <figure class="shadow"><img src="ใส่URLภาพ"></figure> <figure class="shadow"><img src="ใส่URLภาพ"></figure> </div> </div></section>   <style>* { margin: 0; padding: 0;}html, body { max-width: 100%; overflow-p: hidden; overflow-p: hidden;}#slideshow { margin: 0 auto; padding-top: 50px; height: 600px; width: 100%; box-sizing: border-box;}.slideshow-title { margin: 0 auto; text-align: center; margin-top: 25%; letter-spacing: 3px; font-weight: 300;}.sub-heading { padding-top: 50px; font-size: 18px;} .sub-heading-two { font-size: 15px;} .sub-heading-three { font-size: 13px;} .sub-heading-four { font-size: 11px;} .sub-heading-five { font-size: 9px;} .sub-heading-six { font-size: 7px;} .sub-heading-seven { font-size: 5px;} .sub-heading-eight { font-size: 3px;} .sub-heading-nine { font-size: 1px;}.entire-content { margin: auto; width: 190px; perspective: 1000px; position: relative; padding-top: 80px;}.content-carrousel { width: 100%; position: absolute; float: right; animation: rotar 15s infinite linear; transform-style: preserve-3d;}.content-carrousel:hover { animation-play-state: paused; cursor: pointer;}.content-carrousel figure { width: 100%; height: 120px; border: 1px solid #3b444b; overflow-p: hidden; position: absolute;}.content-carrousel figure (1) { transform: rotateY(0deg) translateZ(300px); } .content-carrousel figure (2) { transform: rotateY(40deg) translateZ(300px); } .content-carrousel figure (3) { transform: rotateY(80deg) translateZ(300px); } .content-carrousel figure (4) { transform: rotateY(120deg) translateZ(300px); } .content-carrousel figure (5) { transform: rotateY(160deg) translateZ(300px); } .content-carrousel figure (6) { transform: rotateY(200deg) translateZ(300px); } .content-carrousel figure (7) { transform: rotateY(240deg) translateZ(300px); } .content-carrousel figure (8) { transform: rotateY(280deg) translateZ(300px); } .content-carrousel figure (9) { transform: rotateY(320deg) translateZ(300px); } .content-carrousel figure (10) { transform: rotateY(360deg) translateZ(300px); } .shadow {    position: absolute;    box-shadow: 0px 0px 20px 0px #000;    border-radius: 1px;}.content-carrousel img { image-rendering: auto; transition: all 300ms; width: 100%; height: 100%;}.content-carrousel img:hover { transform: scale(1.2); transition: all 300ms;}@keyframes rotar { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); }}</style>