Is it possible to rotate a card simultaneously in the X and Y directions?
I have an image that I would like to rotate in both the X and Y directions!
This code is written in HTML,
<div class="card"></div>
and this is CSS,
.card {
background-image: url("https://i.sstatic.net/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);
}
When I try to add the Y transition to the hover effect, it only takes into account the second transition and ignores the first one Like This
.card:hover {
-webkit-transform: rotateX(60deg);
-webkit-transform: rotateY(60deg);
}
Is there a way to translate that Card both along the X and Y diagonals? Please provide assistance!