0

I have some code that works in the latest version of Firefox (unsure about IE, I suspect not but I don't use IE)....and just realized it isn't working in Chrome, I need to add the vendor prefixes. I'll get to the mozzilla etc in time, but right now I just want to get it working in chrome. The example that works in FF and not in chrome can be seen here http://fourthperimetertactical.com/goods.php

Update: The code below now works in a spinning motion like a carousel in Firefox/Chrome/Opera (latest versions, no back testing done).

It's rough, I am still cleaning up styling, size etc...but the motion itself is working like a charm.

updated as of September 25, 2013 at 5:15

/*Carousel*/



#wrapper {
    width: 500px;
    margin: 0 auto;
}

#wrapper {
  perspective: 2500;
    -webkit-perspective: 2500;
    width: 500px;
    margin: 30px auto 0 auto;
  perspective-origin: 50% 150px;
    -webkit-perspective-origin: 50% 150px;
  transition: perspective, 1s;
  -o-transition: -o-perspective, 1s;
  -moz-transition: -moz-perspective, 1s;
    -webkit-transition: -webkit-perspective, 1s;
}

#image:hover {
  animation-play-state:paused;
  -o-animation-play-state:paused;
  -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
}


@-webkit-keyframes spin {
    from {
    transform: rotateY(0);
    -o-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -moz-transform: rotateY(0);
        -webkit-transform: rotateY(0);
    }
    to {
    transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
        -webkit-transform: rotateY(-360deg);
    }
}

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


#image {
    margin: 0 auto;
    height: 300px;
    width: 400px;
  transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  animation: spin 24s infinite linear;
  -moz-animation: spin 24s infinite linear;
  -o-animation: spin 24s infinite linear;
    -webkit-animation: spin 24s infinite linear;

     transform-style: preserve-3d;
        animation: rotation 20s infinite linear;
}

.image {
    position: absolute;
    height: 300px;
    width: 400px;
        border-radius: 25px;
    background-color: rgba(0,0,0,0.6);
    text-align: center;
    font-size: 20em;
    color: #fff;
        display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    overflow: hidden;
    border: solid 5px black;
        line-height: 116px;

}

#image > .i1 {
  transform: translateZ(485px);
  -moz-transform: translateZ(485px);
  -o-transform: translateZ(485px);
  -ms-transform: translateZ(485px);
  -webkit-transform: translateZ(485px);
}
#image > .i2 {
  transform: rotateY(45deg) translateZ(485px);
  -moz-transform: rotateY(45deg) translateZ(485px);
  -o-transform: rotateY(45deg) translateZ(485px);
  -ms-transform: rotateY(45deg) translateZ(485px);
  -webkit-transform: rotateY(45deg) translateZ(485px);
}
#image > .i3 {
  transform: rotateY(90deg) translateZ(485px);
  -moz-transform: rotateY(90deg) translateZ(485px);
  -o-transform: rotateY(90deg) translateZ(485px);
  -ms-transform: rotateY(90deg) translateZ(485px);
  -webkit-transform: rotateY(90deg) translateZ(485px);
}
#image > .i4 {
  transform: rotateY(135deg) translateZ(485px);
  -moz-transform: rotateY(135deg) translateZ(485px);
  -o-transform: rotateY(135deg) translateZ(485px);
  -ms-transform: rotateY(135deg) translateZ(485px);
  -webkit-transform: rotateY(135deg) translateZ(485px);
}
#image > .i5 {
  transform: rotateY(180deg) translateZ(485px);
  -moz-transform: rotateY(180deg) translateZ(485px);
  -o-transform: rotateY(180deg) translateZ(485px);
  -ms-transform: rotateY(180deg) translateZ(485px);
  -webkit-transform: rotateY(180deg) translateZ(485px);
}
#image > .i6 {
  transform: rotateY(225deg) translateZ(485px);
  -moz-transform: rotateY(225deg) translateZ(485px);
  -o-transform: rotateY(225deg) translateZ(485px);
  -ms-transform: rotateY(225deg) translateZ(485px);
  -webkit-transform: rotateY(225deg) translateZ(485px);
}
#image > .i7 {
  transform: rotateY(270deg) translateZ(485px);
  -moz-transform: rotateY(270deg) translateZ(485px);
  -o-transform: rotateY(270deg) translateZ(485px);
  -ms-transform: rotateY(270deg) translateZ(485px);
  -webkit-transform: rotateY(270deg) translateZ(485px);
}
#image > .i8 {
  transform: rotateY(315deg) translateZ(485px);
  -moz-transform: rotateY(315deg) translateZ(485px);
  -o-transform: rotateY(315deg) translateZ(485px);
  -ms-transform: rotateY(315deg) translateZ(485px);
  -webkit-transform: rotateY(315deg) translateZ(485px);
}

img {
  border-radius: 25px;
  height: 300px;
  width: 400px;

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

img:hover{
    transform: scale(1.2,1.2);
}





::-webkit-scrollbar {
width : 2px;
}
::-webkit-scrollbar-track {
border-radius : 10px;
}
::-webkit-scrollbar-thumb {
border-radius : 10px;
}

I thank anyone in advance for any pointers in where it's messing up. The css does everything it should but the actual correct rotation.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Jana
  • 29
  • 1
  • 7
  • I just found one thing where I changed – Jana Sep 24 '13 at 02:34
  • @keyframes rotating and actually got a rotating animation, but it's not linear..it's going clockwise...a bit of progress, but now I'm really stumped as to why it's not going linear. I know it's got to be something simple I'm missing. – Jana Sep 24 '13 at 02:37
  • Perhaps I should be clearer..it should be going left to right..not in a spin.....like it is doing only in Chrome. In Firefox it is not spinning, but smoothly moving from the left to the right, infinitely. – Jana Sep 24 '13 at 02:53
  • I managed to find what I guess is the original tutorial that this code originated from and the carousel is looking correct in chrome, but the rotation is not animating, having tweaked everything it looks like my issue lies in the @keyframes rotation, so that's what I'm looking at now. Though I have noticed, the carousel is slightly larger and seems slightly shaky compared to last night when it ran very smoothly in firefox. So if anyone knows how I might rid myself of the shaking that would be great. – Jana Sep 24 '13 at 15:01
  • So..at this point where I am at is...it is working in Firefox..albeit shaky compared to the smoothness I had yesterday....I have gone from one single panel showing to the whole carousel showing in Chrome, I stopped the clockwise spin, but it's not horizontally animating either..it's static...and it must be in my keyframes.....and ugh that shaking is driving me nuts... but learning.... – Jana Sep 24 '13 at 15:51
  • I just looked at this in IE 10....in IE10 it animates but it spins horizontally but not like a carousel.....*facepalms*....I am beginning to doubt my being able to get this tweaked...time for a break I guess and come back to it fresh. – Jana Sep 24 '13 at 16:19
  • Well, after spending most of the day trying to figure out how to get a 3D carousel to work not only in firefox, but also in Chrome, opera and IE...I have gotten this far...I am changing the original code to updates, in case anyone else ever decides to do this...honestly I'm going to end up changing this off my client's website as it's not big enough for a gallery, but now I see it as more of a challenge...as of now, the above edit at 5:15 on 9/24 will spin correctly in Firefox and in Chrome, I am thinking it should in Opera as well, I hadn't had a chance to check that yet. IE does not work. – Jana Sep 24 '13 at 22:15
  • I could find nothing anywhere that addresses cross compatibility for this in all the browsers..only chrome/opera and a firefox css3 coding..but nothing that works all the same in all 3..so I am trying to combine them all. Still some glitches...resizing etc..I like responsive sizing it's not doing that..but at least it's not rotating or not rotating and doing all sorts of wierd stuff. – Jana Sep 24 '13 at 22:17

0 Answers0