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.

score 9 · Answer 1 · answered Jan 11 '12 at 14:04

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 '12 at 14:04

easwee

15,757
24
60
83

@Charl - in what browser are you looking at it? Works for me in Chrome and Safari. – easwee Jan 11 '12 at 14:53
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: http://phoenixdigital.co.za/test/cube/imagecube/new/ Old code(not meant to work, has a syntax error) http://phoenixdigital.co.za/test/cube/imagecube/ – Charl Jan 12 '12 at 07:30
@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. – easwee Jan 12 '12 at 12:10
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. :) – Shawn Khameneh Feb 10 '12 at 19:28

Constantin Groß · Accepted Answer · 2019-10-21T10:52:03.427

-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 '19 at 10:52

answered Jan 11 '12 at 13:28

Constantin Groß

10,719
4
24
50

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. – Charl Jan 11 '12 at 13:40
Does this page help you? http://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:`. – Constantin Groß Jan 11 '12 at 13:48
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. – Charl Jan 11 '12 at 14:06

CSS3 Multiple transforms

2 Answers2

Linked