如何使用CSS Only在X和Y方向上进行转换

Question

如何一次在X和Y方向上旋转卡？

我有一个图像,我想在X和Y方向旋转它!

这是HTML,

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

这是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);
}

小提琴项目就在这里

如果我将Y转换添加到悬停,它将进行唯一的第二次转换并忽略第一次转换

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

如何在X和Y对角线中翻译该卡？请帮我!

Answer 1

使用rotateX(),rotateY()或rotateZ()组合,如:

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

看看下面的这个片段:

.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>

希望这可以帮助!