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

<!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>

About Cloud Tech
Cloud-Tech is a Entertainment site is a provider of Bascic Knolwedge on Computer, Mobile, Festival, Life Changing Quotes Wishes. The main mission of Cloud-Tech is to provide the Updated News On Technology.

Cloud-Tech

Follow Us

2019 Delighted Offer

Translate

Monday, December 24, 2018

3D IMAGE SLIDE SHOW USING HTML CSS

3D IMAGE SLIDE SHOW USING HTML CSS

Pages

Most Recent

Categories

Popular

About & Social

Cloud-tech

About

Link list 3

Tags

Categories

Popular Posts

Cloud-Tech

Follow Us

2019 Delighted Offer

Translate

Monday, December 24, 2018

3D IMAGE SLIDE SHOW USING HTML CSS

3D IMAGE SLIDE SHOW USING HTML CSS

Subscribe via email

Pages

Most Recent

Categories

Popular

About & Social

Cloud-tech

About

Link list 3

Tags

Categories

Popular Posts