Monday, December 24, 2018

3D IMAGE SLIDE SHOW USING HTML CSS

Cloud Tech December 24, 2018 COMPUTER, WEB DESIGN

3D IMAGE SLIDE SHOW USING HTML CSS

SCROLL DOWN FOR SOURCE CODE

Also read :UPLOAD PROFILE IMAGE WITH PREVIEW USING HTML CSS JQUERY

Also read :CONVERT NUMBER INTO DATE IN EXCEL

Also read :RESPONSIVE USER LOGIN FORM USING HTML CSS JAVA

<!DOCTYPE html>
<html>
<head>
 <title>3D Image Slide Show</title>
 <style type="text/css">
 *{
  background-color: steelblue;
 }
 .slideshow{
  margin: 0 auto;
  padding-top: 50px;
  height: 700px;
  box-sizing: border-box;
  background:steelblue;
 }
 .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;
  overflow: hidden;
  position: absolute;
  border:2px solid #fff;
 }
 .content-carrousel figure:nth-child(1){
  transform: rotateY(0deg) translateZ(300px);
 }
 .content-carrousel figure:nth-child(2){
  transform: rotateY(40deg) translateZ(300px);
 }
 .content-carrousel figure:nth-child(3){
  transform: rotateY(80deg) translateZ(300px);
 }
 .content-carrousel figure:nth-child(4){
  transform: rotateY(120deg) translateZ(300px);
 }
 .content-carrousel figure:nth-child(5){
  transform: rotateY(160deg) translateZ(300px);
 }
 .content-carrousel figure:nth-child(6){
  transform: rotateY(200deg) translateZ(300px);
 }
 .content-carrousel figure:nth-child(7){
  transform: rotateY(240deg) translateZ(300px);
 }
 .content-carrousel figure:nth-child(8){
  transform: rotateY(280deg) translateZ(300px);
 }
 .content-carrousel figure:nth-child(9){
  transform: rotateY(320deg) translateZ(300px);
 }
 .shadow{
  position: absolute;
  box-shadow: 0px 0px 20px 0px #000;
  border-radius: 5px;
 }
 .content-carrousel img{
  width: 100%;
  height: 100%;
  image-rendering: auto;
  transition: 300ms;
 }
 .content-carrousel img:hover{
  transform: scale(1.2);
  transition: all 300ms;
 }
 @keyframes rotar{
  from{
   transform: rotateY(0deg);
  }to{
   transform: rotateY(360deg);
  }
 }
 .blink{
  color: orange;
  text-align: center;
  font-family: arial;
  font-weight: bold;
  font-size: 40px;
  animation: colorchange 1.5s infinite;
  text-shadow: 2px 2px 4px #dc143c;
 }
 @keyframes colorchange{
  0%{color: yellow}
  25%{color: blue}
  50%{color: purple}
  75%{color: limegreen}
  100%{color: #dc143c}
 }
 </style>
</head>
<body>
 
<section class="slideshow">
 <div class="blink">
Join Thoda Masti Thoda Gyan</div>
<div class="blink">
Like & Share This Video</div>
<div class="content">
  <div class="content-carrousel">
   <figure class="shadow"><img src="a.jpg"></figure>
   <figure class="shadow"><img src="b.jpg"></figure>
   <figure class="shadow"><img src="c.jpg"></figure>
   <figure class="shadow"><img src="d.jpg"></figure>
   <figure class="shadow"><img src="e.jpg"></figure>
   <figure class="shadow"><img src="f.jpg"></figure>
   <figure class="shadow"><img src="g.jpg"></figure>
   <figure class="shadow"><img src="h.jpg"></figure>
   <figure class="shadow"><img src="i.jpg"></figure>   
  </div>
</div>
</section>
</body>
</html>