9

How can I rotate a card in X & Y direction at a time?

I have an image and I want to rotate that in both X & Y direction!

this is HTML,

<div class="card"></div>

and this is CSS,

.card {
background-image: url("https://i.stack.imgur.com/FW7wN.png");
height: 100px;
margin: 50px auto;
position: relative;
width: 100px;
-webkit-transition: .5s linear;
-webkit-transform-style: preserve-3d;
}


.card:hover {
-webkit-transform: rotateX(60deg);
}

Fiddle Project is Here

if I add Y transition to hover it is taking the only 2nd transition and ignoring 1st transition Like This

 .card:hover {
-webkit-transform: rotateX(60deg);
-webkit-transform: rotateY(60deg);
}

How can I translate that Card both in X&Y diagonals? Please help me!

rakcode
  • 2,256
  • 4
  • 19
  • 44
  • What is "rotate in X and Y direction" supposed to be? Rotating is done either clockwise or counterclockwise, that has nothing to do with X and/or Y. – connexo Nov 29 '16 at 14:53
  • I didn't get what they call for that transmission, so I used "rotate", u can see fiddle example there! – rakcode Nov 29 '16 at 14:55
  • 1
    Please add unprefixed `transition` and `transform-*` declarations! Prefixed properties were introduced only for experiments and were not supposed to be used in production. All modern browsers support all these properties unprefixed, and only some of them support prefixed versions. – Ilya Streltsyn Nov 29 '16 at 15:02

1 Answers1

14

Use rotateX(), rotateY() or rotateZ() combined, like:

.card:hover {
  transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
}

Have a look at this snippet below:

.card {
    background-image: url("https://i.stack.imgur.com/FW7wN.png");
    height: 100px;
    margin: 50px auto;
    position: relative;
    width: 100px;
    -webkit-transition: .5s linear;
    -webkit-transform-style: preserve-3d;
}
    
.card:hover {
    -webkit-transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
}
<div class="card"></div>

Hope this helps!

Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41