3D photo carousel

3 replies [Last post]

Mon, 2015-09-21 19:18

karakter98

Offline

newbie

Last seen: 7 years 27 weeks ago

Timezone: GMT+3

Joined: 2015-09-21

Posts: 1

Points: 2

Hi, I am trying to make an image gallery using css3, html and javascript. It works fine until now, but it has a major problem. It should rotate like a wheel, but the pics that should be in the back get over those that should be in the front. I am a little noob, actually this is my first attempt at web design outside of school, so any help would be greatly appreciated! ;D
Here's the code, there are some unneeded parts which I used to experiment some properties, sorry if it looks untidy :

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
body {
      background-image: url("holding_hands_.jpg");
      background-size: 100%;
      background-repeat: no-repeat;
      margin: 0;
   }
h1 {
      color: rgb(0, 0, 0);
      font-size: 150%;
   }
.preview img {
      border: 6px solid #444;
      padding: 1px;
      max-width: 600px;
                max-height: 450px;
      margin-top: 150px;
   }
  #stage {
    margin: 2em auto 1em 50%;
    height: 140px;
    perspective: 1200px;
    -webkit-perspective: 1200px;
    -webkit-perspective-origin: 0 50%;
  }
  #rotator {
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0% 0px;
    transition: 1s;
  }
  #rotator a {
    position: absolute;
    left: -81px;
  }
  #rotator a img {
    position: absolute;
    display: block;
    top: 10px;
    left: 10px;
    border: 1px solid #ccc;
    background: #fff;
    -webkit-backface-visibility: hidden;
    transform-origin-z: 50% 50% -500px;
  }
  #rotator a img:hover {
   border: 4px solid #00ccff;
   cursor:pointer;
   opacity: 0.5;
  }
  #rotator a:nth-of-type(1) img {
    -webkit-transform: rotateY(-90deg) translateZ(300px);
    transform: rotateY(-90deg) translateZ(300px);
  }
  #rotator a:nth-of-type(2) img {
    -webkit-transform: rotateY(-60deg) translateZ(300px);
    transform: rotateY(-60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(3) img {
    -webkit-transform: rotateY(-30deg) translateZ(300px);
    transform: rotateY(-30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(4) img {
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    background: #000;
  }
  #rotator a:nth-of-type(5) img {
    -webkit-transform: rotateY(30deg) translateZ(300px);
    transform: rotateY(30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(6) img {
    -webkit-transform: rotateY(60deg) translateZ(300px);
    transform: rotateY(60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(7) img {
    -webkit-transform: rotateY(90deg) translateZ(300px);
    transform: rotateY(90deg) translateZ(300px);
  }
  #rotator a:nth-of-type(<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cool.png" title="Cool" alt="Cool" class="smiley-content" /> img {
    -webkit-transform: rotateY(120deg) translateZ(300px);
    transform: rotateY(120deg) translateZ(300px);
  }
  #rotator a:nth-of-type(n+8) { display: none; }
@-webkit-keyframes rotator {
    from { -webkit-transform: rotateY(0deg);  }
    to   { -webkit-transform: rotateY(30deg); }
  }
 #rotator:hover {
    -webkit-animation-play-state: paused;
  }
</style>
<script>
var angle = 0;
function galleryspin(sign) {
   spinner = document.querySelector("#rotator");
   if (!sign) {
      angle = angle + 30;
   } else {
      angle = angle - 30;
   }
   spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg);transform: rotateY("+ angle +"deg);");
}
</script>
   </head>
   <body>
      <div class="gallery" align="center">
      <h1><i>Roses are red,<br>violets are blue,<br>this *beep* was hard,<br>take off your clothes</i></h1>
      <div id="stage">
      <div id="rotator" style="-webkit-animation-name: rotator;">
      <a><img onclick="preview.src=img1.src" name="img1" src="" width="140"></a>
      <a><img onclick="preview.src=img2.src" name="img2" src="" width="140"></a>
      <a><img onclick="preview.src=img3.src" name="img3" src="" width="140"></a>
      <a><img onclick="preview.src=img4.src" name="img4" src="" width="140"></a>
      <a><img onclick="preview.src=img5.src" name="img5" src="" width="140"></a>
      <a><img onclick="preview.src=img6.src" name="img6" src="" width="140"></a>
      <a><img onclick="preview.src=img7.src" name="img7" src="" width="140"></a>
      <a><img onclick="preview.src=img8.src" name="img8" src="" width="140"></a>
      </div>
      </div>
      <div class="preview">
      <img name="preview" src="SexyTime.jpg" alt=""/>
      </div>
      </div>
      <a href="#" style="float: left" onclick="galleryspin('-')">◀</a>
      <a href="#" style="float: right" onclick="galleryspin('')">▶</a>
   </body>
</html>

Tags:

Beginners CSS Questions

Tue, 2015-09-22 03:48

Tony

Offline

Moderator

Brisbane

Last seen: 1 week 3 days ago

Brisbane

Timezone: GMT+10

Joined: 2003-03-12

Posts: 5344

Points: 2965

Hi karakter98, I haven't

Hi karakter98,
I haven't tried playing with your code but it sounds like you need to look into z-index

Tue, 2015-09-22 12:22

gautamz07

Offline

Enthusiast

Last seen: 6 years 27 weeks ago

Timezone: GMT+5.5

Joined: 2014-04-24

Posts: 265

Points: 403

Awesome attempt

Too good ! Kepp up the good work .

Wed, 2015-11-25 06:48

Grace111

Offline

newbie

usa

Last seen: 7 years 18 weeks ago

usa

Timezone: GMT+2

Joined: 2015-11-25

Posts: 1

Points: 1

Tried it

Hey I have tried you code, and I think Tony is right, you need a z-index. It will definitely be better.
Grace

//mod edit: spam link removed ~gt

Hi karakter98, I haven't

Awesome attempt

Tried it

User login

Navigation