Rak_code Rak_code - 8 days ago 7
CSS Question

how to transform in both X & Y direction with CSS Only

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!

Answer

Use rotateX() & rotateY() 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!