CSS3 Multiple transforms

Question

I have a css3 animation, im using the code below to rotate a cube on the X-axis.

@-webkit-keyframes spin2 {
from { -webkit-transform: rotateX(135deg); }
to   { -webkit-transform: rotateX(855deg); }
}

I need to do the code below at the same time as the code above so the cube can rotate on both axis simultaneously.

@-webkit-keyframes spin2 {
from { -webkit-transform: rotateY(135deg); }
to   { -webkit-transform: rotateY(855deg); }
}

Adding the code for the x and y rotation doesn't work, I need to combine these. Is this possible. This is my first time working with css3. Any help would be appreciated.

easwee · Accepted Answer · 2012-01-11 14:04:18Z

9

This should work:

    .yourElement {
        -webkit-animation:spin 4s infinite;
    }
    @-webkit-keyframes spin {
      from {
        -webkit-transform: rotateX(135deg) rotateY(135deg);
      }
      to {
        -webkit-transform: rotateX(855deg) rotateY(855deg);
      }
    }

Sample: http://jsfiddle.net/KRYRk/1/

answered Jan 11, 2012 at 14:04

easwee

16k24 gold badges63 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

easwee Over a year ago

@Charl - in what browser are you looking at it? Works for me in Chrome and Safari.

Charl Over a year ago

Im using Chrome, below is a link to the cube, its rotating at the moment but its not meant to. With the code you supplied it doesnt seem to work but the starting and ending points dont ever seem to match up so a seamless loop isnt shown. Your code: phoenixdigital.co.za/test/cube/imagecube/new Old code(not meant to work, has a syntax error) phoenixdigital.co.za/test/cube/imagecube

easwee Over a year ago

@Charl - I just used your degrees settings - you have to edit it to fit what you want - the code i provided works - to make it smooth and work like you want it's up to you. Do your math - I provided you the code sample on jsfiddle - play with it in there.

Shawn Khameneh Over a year ago

Keep in mind Android doesn't support more than one transform simultaneously and using rotate3d can combine these into one single transform command. Just an FYI, not saying you needed to know, but it's nice to know. :)

Sarah Groß · Accepted Answer · 2019-10-21 10:52:03Z

-3

You can use several transform functions in the transform property by separating them with a space:

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotateX(135deg) rotateY(135deg);
    }
    to   {
        -webkit-transform: rotateX(855deg) rotateY(855deg);
    }
}

edited Oct 21, 2019 at 10:52

answered Jan 11, 2012 at 13:28

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

3 Comments

Charl Over a year ago

Thanks for your reply Connum. Ive just tested this and it doesnt seem to work. It just does the first transform and ignores the second.

Sarah Groß Over a year ago

Does this page help you? css-tricks.com/snippets/css/webkit-keyframe-animation-syntax As far as I understand, you could define two animations and then apply them comma-seperated via -webkit-animation:.

Charl Over a year ago

Ive gone though this page and I cant make much sense out of it, from what I understand I need to Combine multiple transforms and animations but Im not sure. Its my first time using CSS3.

Collectives™ on Stack Overflow

CSS3 Multiple transforms

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related