Menu
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!
443
You can use translateX() and translateY() to only move your element along the x and y axis respectively.
There are many ways of applying multiple transforms in CSS. In this snippet, we'll demonstrate how to achieve this using multiple values of the transform property, as well as using nested classes. In the example below, we'll use multiple values of the transform property.
Multiple transforms can be applied to an element in one property like this: transform: rotate(15deg) translateX(200px); This will rotate the element 15 degrees clockwise and then translate it 200px to the right.
translateY() Transform function for a 2d translation which moves an element on the y-axis by the given value. Note that the y-axis increases vertically downwards: positive lengths shift the element down, while negative lengths shift it up.
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!
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
