Question

如何在X＆amp ;;中旋转卡片？ Y方向一次？

我有一张图片，我想在X＆amp; 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);
}

Fiddle Project is Here

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

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

如何在X＆amp; Y对角线中翻译该卡？请帮帮我！

Answer 1

使用rotateX()，rotateY()或rotateZ()合并，例如：

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

请看下面的这个代码段：

＆＃13;

.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);
    }

＆＃13;

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

＆＃13;

希望这有帮助！

如何在X＆amp;只有CSS的Y方向

1 个答案: