Close Menu

    3d image Slider Using Html Css & Javascript

    developergtm.inBy Updated:No Comments
    3d image Slider Using Html Css & Javascript

    3d image Slider Using Html Css & Javascript

    Hello friends, welcome to this new blog post today. Today we have created a great 3D slider which is quite amazing. Creating this type of 3D slider is quite easy. If you have some knowledge of coding, then you can create this type of ad slider very easily.

    Friends, this 3D slider is amazing. In this, you can see the slider in this way and we have also added keyboard buttons in this slider, with the help of which you can see the slider and can also use your original keyboard. We have also added a control button, with the help of which you can see the slider in two ways.

    We have added some images in HTML code, which can also be customized, but you need to have some knowledge of HTML and friends, along with CSS, we have also used JavaScript to create this 3D slider.

    3d Slider HTML Code

    				
					<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Developergtm - 3D stack cards like windows7</title><link rel="preload" as="image" imagesrcset="https://developergtm.in/wp-content/uploads/2024/08/Untitled-design-10-768x432.png 768w, https://developergtm.in/wp-content/uploads/2024/08/Untitled-design-10-300x169.png 300w, https://developergtm.in/wp-content/uploads/2024/08/Untitled-design-10-1024x576.png 1024w, https://developergtm.in/wp-content/uploads/2024/08/Untitled-design-10-150x84.png 150w, https://developergtm.in/wp-content/uploads/2024/08/Untitled-design-10-450x253.png 450w, https://developergtm.in/wp-content/uploads/2024/08/Untitled-design-10-1200x675.png 1200w, https://developergtm.in/wp-content/uploads/2024/08/Untitled-design-10-600x338.png 600w, https://developergtm.in/wp-content/uploads/2024/08/Untitled-design-10.png 1280w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergtm.in/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.1" type="font/woff2" crossorigin="anonymous" />
    <link rel="stylesheet" href="./style.css">

</head>

<body>
    <div class="bg">
        <img decoding="async" src="https://www.koimoi.com/wp-content/new-galleries/2024/08/stree-2-at-the-worldwide-box-office-7-days-shraddha-kapoor-rajkummar-rao-starrer-becomes-1st-bollywood-film-to-enter-the-400-crore-club-in-2024-1.jpg"
            alt="">
    </div>
    <!-- partial:index.partial.html -->
    <div id="slider-wrapp">
        <div id="slider" class="_3D">
            <div class="slide"><img decoding="async"
                    src="https://assets.entrepreneur.com/content/3x2/2000/1709702510-Untitleddesign4.png"></div>
            <div class="slide"><img decoding="async"
                    src="https://hindi.news24online.com/wp-content/uploads/2024/03/shraddha-kapoor-1.jpg"></div>
            <div class="slide"><img decoding="async"
                    src="https://staticimg.amarujala.com/assets/images/2024/03/25/sharathathha-kapara_8665c2538b3f71dd2cd7e925648f9d6a.jpeg?w=414">
            </div>
            <div class="slide"><img decoding="async"
                    src="https://www.koimoi.com/wp-content/new-galleries/2024/08/shraddha-kapoors-tu-jhoothi-main-makkaar-stree-2-box-office-01.jpg">
            </div>
            <div class="slide"><img decoding="async"
                    src="https://static.tnn.in/thumb/msid-101594218,thumbsize-39552,width-1280,height-720,resizemode-75/101594218.jpg?quality=100">
            </div>
            <div class="slide"><img decoding="async"
                    src="https://www.bolnews.com/wp-content/uploads/2023/10/FotoJet-2023-10-04T150646.359-635x430.jpg">
            </div>
            <div class="slide"><img decoding="async" src="https://images.indianexpress.com/2024/08/Shraddha-Kapoor-Stree-2.jpg"></div>
            <div class="slide"><img decoding="async"
                    src="https://www.koimoi.com/wp-content/new-galleries/2024/08/stree-2-box-office-is-officially-a-hit-001.jpg">
            </div>
            <div class="slide"><img decoding="async"
                    src="https://www.jagranimages.com/images/newimg/06102023/06_10_2023-shraddha_kapoor_dating_rumour_23548969.webp">
            </div>
        </div>
    </div>
    <div class="keyboard">
        <div class="key ctrl">Ctrl</div>
        <div class="arrows">
            <div class="key up">&uarr;</div>
            <div class="key left">&larr;</div>
            <div class="key down">&darr;</div>
            <div class="key right">&rarr;</div>
        </div>

    </div>
    <!-- partial -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script src="./script.js"></script>


</body>

</html>

    3d Slider CSS Code

    				
					*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  height: 100%;
  overflow: hidden;
}

.bg img {
  width: 100%;
  height: auto;
  filter: blur(10px);
}

.description {
  text-align: center;
  color: #FFFFFF;
  margin-top: 30px;
  line-height: 60px;
}

#slider-wrapp {
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 150px auto;
  text-align: center;
  margin-top: -700px;
}

#slider-wrapp #slider {
  width: 100%;
  height: auto;
  position: relative;
}

#slider-wrapp #slider .slide {
  color: #FFFFFF;
  position: absolute;
  width: 700px;
  height: 450px;
  left: 50%;
  margin-left: -350px;
  -webkit-box-shadow: 0 -36px 9px -28px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 -36px 9px -28px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 -36px 9px -28px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 -36px 9px -28px rgba(0, 0, 0, 0.3);
  box-shadow: 0 -36px 9px -28px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: perspective(1300px) translate3d(0px, -130px, -500px);
  -moz-transform: perspective(1300px) translate3d(0px, -130px, -500px);
  -o-transform: perspective(1300px) translate3d(0px, -130px, -500px);
  -ms-transform: perspective(1300px) translate3d(0px, -130px, -500px);
  transform: perspective(1300px) translate3d(0px, -130px, -500px);
}

#slider-wrapp #slider .slide img {
  padding: 3px;
  background: #FFFFFF;
  border-radius: 3px;
  width: 100%;
}

#slider-wrapp #slider .slide:nth-last-child(4) {
  -webkit-transform: perspective(1300px) translate3d(0px, -110px, -290px);
  -moz-transform: perspective(1300px) translate3d(0px, -110px, -290px);
  -o-transform: perspective(1300px) translate3d(0px, -110px, -290px);
  -ms-transform: perspective(1300px) translate3d(0px, -110px, -290px);
  transform: perspective(1300px) translate3d(0px, -110px, -290px);
}

#slider-wrapp #slider .slide:nth-last-child(3) {
  -webkit-transform: perspective(1300px) translate3d(0px, -75px, -210px);
  -moz-transform: perspective(1300px) translate3d(0px, -75px, -210px);
  -o-transform: perspective(1300px) translate3d(0px, -75px, -210px);
  -ms-transform: perspective(1300px) translate3d(0px, -75px, -210px);
  transform: perspective(1300px) translate3d(0px, -75px, -210px);
}

#slider-wrapp #slider .slide:nth-last-child(2) {
  -webkit-transform: perspective(1300px) translate3d(0px, -40px, -130px);
  -moz-transform: perspective(1300px) translate3d(0px, -40px, -130px);
  -o-transform: perspective(1300px) translate3d(0px, -40px, -130px);
  -ms-transform: perspective(1300px) translate3d(0px, -40px, -130px);
  transform: perspective(1300px) translate3d(0px, -40px, -130px);
}

#slider-wrapp #slider .slide:nth-last-child(1) {
  -webkit-transform: perspective(1300px) translate3d(0px, -5px, -50px);
  -moz-transform: perspective(1300px) translate3d(0px, -5px, -50px);
  -o-transform: perspective(1300px) translate3d(0px, -5px, -50px);
  -ms-transform: perspective(1300px) translate3d(0px, -5px, -50px);
  transform: perspective(1300px) translate3d(0px, -5px, -50px);
}

#slider-wrapp #slider .slide.active {
  -webkit-transform: perspective(1300px) translate3d(0px, 100px, 0px);
  -moz-transform: perspective(1300px) translate3d(0px, 100px, 0px);
  -o-transform: perspective(1300px) translate3d(0px, 100px, 0px);
  -ms-transform: perspective(1300px) translate3d(0px, 100px, 0px);
  transform: perspective(1300px) translate3d(0px, 100px, 0px);
  opacity: 0;
}

#slider-wrapp #slider.transfomer .slide:nth-last-child(5) {
  -webkit-transform: perspective(1300px) translate3d(0px, -110px, -290px);
  -moz-transform: perspective(1300px) translate3d(0px, -110px, -290px);
  -o-transform: perspective(1300px) translate3d(0px, -110px, -290px);
  -ms-transform: perspective(1300px) translate3d(0px, -110px, -290px);
  transform: perspective(1300px) translate3d(0px, -110px, -290px);
}

#slider-wrapp #slider.transfomer .slide:nth-last-child(4) {
  -webkit-transform: perspective(1300px) translate3d(0px, -75px, -210px);
  -moz-transform: perspective(1300px) translate3d(0px, -75px, -210px);
  -o-transform: perspective(1300px) translate3d(0px, -75px, -210px);
  -ms-transform: perspective(1300px) translate3d(0px, -75px, -210px);
  transform: perspective(1300px) translate3d(0px, -75px, -210px);
}

#slider-wrapp #slider.transfomer .slide:nth-last-child(3) {
  -webkit-transform: perspective(1300px) translate3d(0px, -40px, -130px);
  -moz-transform: perspective(1300px) translate3d(0px, -40px, -130px);
  -o-transform: perspective(1300px) translate3d(0px, -40px, -130px);
  -ms-transform: perspective(1300px) translate3d(0px, -40px, -130px);
  transform: perspective(1300px) translate3d(0px, -40px, -130px);
}

#slider-wrapp #slider.transfomer .slide:nth-last-child(2) {
  -webkit-transform: perspective(1300px) translate3d(0px, -5px, -50px);
  -moz-transform: perspective(1300px) translate3d(0px, -5px, -50px);
  -o-transform: perspective(1300px) translate3d(0px, -5px, -50px);
  -ms-transform: perspective(1300px) translate3d(0px, -5px, -50px);
  transform: perspective(1300px) translate3d(0px, -5px, -50px);
}

#slider-wrapp #slider._3D .slide {
  -webkit-box-shadow: -50px 10px 50px -15px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: -50px 10px 50px -15px rgba(0, 0, 0, 0.3);
  -o-box-shadow: -50px 10px 50px -15px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: -50px 10px 50px -15px rgba(0, 0, 0, 0.3);
  box-shadow: -50px 10px 50px -15px rgba(0, 0, 0, 0.3);
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(440px, -230px, -1950px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(440px, -230px, -1950px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(440px, -230px, -1950px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(440px, -230px, -1950px);
  transform: perspective(1300px) rotateY(30deg) translate3d(440px, -230px, -1950px);
  opacity: 0;
}

#slider-wrapp #slider._3D .slide:nth-last-child(1) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, 20px, 0px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, 20px, 0px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, 20px, 0px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, 20px, 0px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, 20px, 0px);
  opacity: 1;
}

#slider-wrapp #slider._3D .slide:nth-last-child(2) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -40px, -200px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -40px, -200px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -40px, -200px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -40px, -200px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, -40px, -200px);
  opacity: 1;
}

#slider-wrapp #slider._3D .slide:nth-last-child(3) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -100px, -400px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -100px, -400px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -100px, -400px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -100px, -400px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, -100px, -400px);
  opacity: 1;
}

#slider-wrapp #slider._3D .slide:nth-last-child(4) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -160px, -600px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -160px, -600px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -160px, -600px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -160px, -600px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, -160px, -600px);
  opacity: 1;
}

#slider-wrapp #slider._3D .slide:nth-last-child(5) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -175px, -800px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -175px, -800px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -175px, -800px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -175px, -800px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, -175px, -800px);
  opacity: 1;
}

#slider-wrapp #slider._3D .slide:nth-last-child(6) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -190px, -1000px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -190px, -1000px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -190px, -1000px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -190px, -1000px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, -190px, -1000px);
  opacity: 1;
}

#slider-wrapp #slider._3D .slide:nth-last-child(7) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(490px, -200px, -1200px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(490px, -200px, -1200px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(490px, -200px, -1200px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(490px, -200px, -1200px);
  transform: perspective(1300px) rotateY(30deg) translate3d(490px, -200px, -1200px);
  opacity: 1;
}

#slider-wrapp #slider._3D .slide:nth-last-child(8) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(480px, -210px, -1450px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(480px, -210px, -1450px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(480px, -210px, -1450px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(480px, -210px, -1450px);
  transform: perspective(1300px) rotateY(30deg) translate3d(480px, -210px, -1450px);
  opacity: 1;
}

#slider-wrapp #slider._3D .slide:nth-last-child(9) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(460px, -220px, -1700px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(460px, -220px, -1700px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(460px, -220px, -1700px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(460px, -220px, -1700px);
  transform: perspective(1300px) rotateY(30deg) translate3d(460px, -220px, -1700px);
  opacity: 0.5;
}

#slider-wrapp #slider._3D .slide.active {
  opacity: 0;
  -webkit-transform: perspective(1300px) rotateX(0deg) rotateY(35deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(515px, 100px, 300px) !important;
  -moz-transform: perspective(1300px) rotateX(0deg) rotateY(35deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(515px, 100px, 300px) !important;
  -o-transform: perspective(1300px) rotateX(0deg) rotateY(35deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(515px, 100px, 300px) !important;
  -ms-transform: perspective(1300px) rotateX(0deg) rotateY(35deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(515px, 100px, 300px) !important;
  transform: perspective(1300px) rotateX(0deg) rotateY(35deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(515px, 100px, 300px) !important;
}

#slider-wrapp #slider._3D.transfomer .slide:nth-last-child(2) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, 20px, 0px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, 20px, 0px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, 20px, 0px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, 20px, 0px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, 20px, 0px);
  opacity: 1;
}

#slider-wrapp #slider._3D.transfomer .slide:nth-last-child(3) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -40px, -200px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -40px, -200px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -40px, -200px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -40px, -200px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, -40px, -200px);
  opacity: 1;
}

#slider-wrapp #slider._3D.transfomer .slide:nth-last-child(4) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -100px, -400px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -100px, -400px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -100px, -400px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -100px, -400px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, -100px, -400px);
  opacity: 1;
}

#slider-wrapp #slider._3D.transfomer .slide:nth-last-child(5) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -160px, -600px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -160px, -600px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -160px, -600px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -160px, -600px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, -160px, -600px);
  opacity: 1;
}

#slider-wrapp #slider._3D.transfomer .slide:nth-last-child(6) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -175px, -800px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -175px, -800px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -175px, -800px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -175px, -800px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, -175px, -800px);
  opacity: 1;
}

#slider-wrapp #slider._3D.transfomer .slide:nth-last-child(7) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -190px, -1000px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -190px, -1000px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -190px, -1000px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(510px, -190px, -1000px);
  transform: perspective(1300px) rotateY(30deg) translate3d(510px, -190px, -1000px);
  opacity: 1;
}

#slider-wrapp #slider._3D.transfomer .slide:nth-last-child(8) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(490px, -200px, -1200px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(490px, -200px, -1200px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(490px, -200px, -1200px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(490px, -200px, -1200px);
  transform: perspective(1300px) rotateY(30deg) translate3d(490px, -200px, -1200px);
  opacity: 1;
}

#slider-wrapp #slider._3D.transfomer .slide:nth-last-child(9) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(480px, -210px, -1450px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(480px, -210px, -1450px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(480px, -210px, -1450px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(480px, -210px, -1450px);
  transform: perspective(1300px) rotateY(30deg) translate3d(480px, -210px, -1450px);
  opacity: 1;
}

#slider-wrapp #slider._3D.transfomer .slide:nth-last-child(10) {
  -webkit-transform: perspective(1300px) rotateY(30deg) translate3d(460px, -220px, -1700px);
  -moz-transform: perspective(1300px) rotateY(30deg) translate3d(460px, -220px, -1700px);
  -o-transform: perspective(1300px) rotateY(30deg) translate3d(460px, -220px, -1700px);
  -ms-transform: perspective(1300px) rotateY(30deg) translate3d(460px, -220px, -1700px);
  transform: perspective(1300px) rotateY(30deg) translate3d(460px, -220px, -1700px);
  opacity: 0.5;
}

.keyboard {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.keyboard .key {
  border-radius: 9px;
  color: #000000;
  display: inline-block;
  padding-top: 8px;
  text-indent: 15px;
  background: #ffffff;
  position: relative;
  font-family: sans-serif;
  cursor: pointer;
}

.keyboard .key:hover {
  background: #eee;
}

.keyboard .key.ctrl {
  width: 75px;
  height: 50px;
  position: relative;
  top: -4px;
}

.keyboard .key.ctrl.active {
  top: 0;
  margin-bottom: 5px;
}

.keyboard .key:after {
  content: " ";
  display: inline-block;
  position: absolute;
  top: 1px;
  left: -2px;
  right: -2px;
  height: 50px;
  border: 5px solid #aaa;
  border-radius: 5px;
  border-top: 0;
}

.keyboard .key.active {
  -webkit-box-shadow: inset 0 0 20px #999;
  -moz-box-shadow: inset 0 0 20px #999;
  -o-box-shadow: inset 0 0 20px #999;
  -ms-box-shadow: inset 0 0 20px #999;
  box-shadow: inset 0 0 20px #999;
  height: 45px !important;
  top: 3px;
}

.keyboard .key.active:after {
  height: 47px;
  border-color: #999;
}

.keyboard .arrows {
  display: inline-block;
  margin-left: 15px;
}

.keyboard .arrows>.key {
  width: 50px;
  height: 50px;
  font-weight: bold;
  font-size: 20px;
  margin: 2px;
}

.keyboard .arrows>.key.up {
  display: block;
  margin: 0 auto 3px 60px;
}

.keyboard .arrows>.key.up.active {
  margin-bottom: 8px;
}

.keyboard p {
  padding-top: 10px;
  font-size: 17px;
  letter-spacing: 2px;
  background: #FFFFFF;
  line-height: 34px;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
}

.keyboard kbd {
  display: inline-block;
  margin: 1px;
  padding: 1px 4px;
  font-size: 11px;
  line-height: 1.4;
  color: #242729;
  text-shadow: 0 1px 0 #FFFFFF;
  background-color: #e1e3e5;
  border: 1px solid #adb3b9;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(12, 13, 14, 0.2), 0 0 0 2px #FFFFFF inset;
  white-space: nowrap;
  position: relative;
  top: -3px;
}

@media (max-width: 980px) {
  .keyboard {
    opacity: 0;
  }
}

    3d Slider Javascript Code

    				
					$(document).ready(function() {
    var $slider=$("#slider");
    var slideLength = $("#slider > .slide").length -1 ;
    var ctrl=false;
    $(document).keydown(function (e) {
        if(e.keyCode==17) {
            ctrl=true;
            $("#slider").removeClass("_3D");
            $(".key.ctrl").addClass("active");
        }
    }).keyup(function (e) {
        if(e.which == 17){
            ctrl=false;
            $("#slider").addClass("_3D");
            $(".key.ctrl").removeClass("active");
        }
        if(e.which==39 || e.which==40){
            nextSlide();
            return;
        }
        if(e.which==37 || e.which==38){
            prevSlide();
            return;
        }
    });

    var is3D=false;
    $(".key").mousedown(function(){
        if($(this).hasClass("ctrl")){
            if($(this).hasClass("active")) is3D = true;
            $("#slider").removeClass("_3D");
        }
        $(this).addClass("active");
    }).mouseup(function(){
        if($(this).hasClass("down") || $(this).hasClass("right")) nextSlide();
        if($(this).hasClass("up") || $(this).hasClass("left")) prevSlide();
        console.log(is3D);
        if($(this).hasClass("ctrl active")){
            if(is3D){
                $(this).removeClass("active");
                $("#slider").addClass("_3D");
                is3D=false;
            } 
        }else{
            $(this).removeClass("active");
        }
    });

    function nextSlide() {
        lastElem().addClass("active");
        $slider.addClass("transfomer");
        setTimeout(function(){
            var $slicedSlide = $('.slide').slice(slideLength);
            $slider.prepend($slicedSlide);
            $(document).find(".slide.active").removeClass("active");
            $slider.removeClass("transfomer");
        },300);
    }

    function prevSlide(){
        var $slicedSlide = $('.slide').slice(0,1).addClass("active");
        $slider.append($slicedSlide);
        setTimeout(function(){
            lastElem().removeClass("active");
        },50);
    }

    function lastElem(){
        return $("#slider > .slide").last();
    }
});

    Live Preview:

    See the Pen 3d image Slider Using Html Css & Javascript by Developergtm (@developergtm) on CodePen.

    Related Posts