slide-Shwo pure css3

In this example below you will see how to do a slide-Shwo pure css3 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mohamed_nasr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mohamed_nasr ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>slide-Shwo pure css3</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Css</title>
        <meta name="description">
        <link rel="stylesheet" href="cc.css">
    </head>
    <body>
        <!----
         <div>mema</div>
         <div class="one">ddd</div>
           --->
        
        <div class="slider">
            <div class="slid">
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
            </div>
        </div> 
        
        <div class="slider-show">
            <div class="slid-show">
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                <span><img src="http://via.placeholder.com/350x150"></span>
                
                
            </div>
        </div>
    </body>
    
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mohamed_nasr/slide-shwo-pure-css3-xroaRg */
* {
    margin: 0px;
    padding: 0px;
    outline: none;
    border: none;
    box-sizing: border-box;
}

body {
    background-color: bisque;
    
}

img {
    width:  200px;
    height:  150px;
}

.slider-show {
    width: 210px;
    height: 160px;
    margin: 300px 600px;
    position: relative;
    perspective: 1000px;
}

.slider-show .slid-show{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotation 20s infinite linear;
}

.slider-show .slid-show span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid #000;
    overflow: hidden;
}


.slid-show span:nth-child(1) {transform:  rotatex(0deg)   translateZ(288px);}
.slid-show span:nth-child(2) {transform:  rotatex(40deg)   translateZ(288px);}
.slid-show span:nth-child(3) {transform:  rotatex(80deg)   translateZ(288px);}
.slid-show span:nth-child(4) {transform:  rotatex(120deg)   translateZ(288px);}
.slid-show span:nth-child(5) {transform:  rotatex(160deg)   translateZ(288px);}
.slid-show span:nth-child(6) {transform:  rotatex(200deg)   translateZ(288px);}
.slid-show span:nth-child(7) {transform:  rotatex(240deg)   translateZ(288px);}
.slid-show span:nth-child(8) {transform:  rotatex(280deg)   translateZ(288px);}
.slid-show span:nth-child(9) {transform:  rotatex(320deg)   translateZ(288px);}

.slid-show img {
    cursor: pointer;
	transition: all .5s ease;
}


.slid-show img:hover{
    transform: scale(1.2,1.2);
    animation-play-state: paused;
}
.slid-show:hover{
    animation-play-state: paused;
}

@keyframes rotation{
	from{
		transform: rotatex(0deg);
	}
	to{
		transform: rotatex(360deg);
	}
}


/*--------------------------------------------------------------------------------*/

.slider {
    width: 210px;
    height: 160px;
    margin: 100px 600px;
    position: relative;
    perspective: 1000px;
}

.slider .slid{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotation-one 20s infinite linear;
}

.slider .slid span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid #000;
    overflow: hidden;
}


.slid span:nth-child(1) {transform:  rotateY(0deg)   translateZ(288px);}
.slid span:nth-child(2) {transform:  rotateY(40deg)   translateZ(288px);}
.slid span:nth-child(3) {transform:  rotateY(80deg)   translateZ(288px);}
.slid span:nth-child(4) {transform:  rotateY(120deg)   translateZ(288px);}
.slid span:nth-child(5) {transform:  rotateY(160deg)   translateZ(288px);}
.slid span:nth-child(6) {transform:  rotateY(200deg)   translateZ(288px);}
.slid span:nth-child(7) {transform:  rotateY(240deg)   translateZ(288px);}
.slid span:nth-child(8) {transform:  rotateY(280deg)   translateZ(288px);}
.slid span:nth-child(9) {transform:  rotateY(320deg)   translateZ(288px);}

.slid img {
    cursor: pointer;
	transition: all .5s ease;
}


.slid img:hover{
    transform: scale(1.2,1.2);
    animation-play-state: paused;
}
.slid:hover{
    animation-play-state: paused;
}

@keyframes rotation-one{
	from{
		transform: rotateY(0deg);
	}
	to{
		transform: rotateY(360deg);
	}
}


Comments