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

This question already has answers here:

How to apply multiple transforms in CSS?

(7个答案)


4年前关闭。




如何一次在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);
}

Fiddle Project is Here

如果我将Y过渡添加到悬停，它将仅执行第二个过渡而忽略第一个过渡
像这样

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

如何在X＆Y对 Angular 线中同时翻译该卡片？
请帮我!

最佳答案

结合使用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>

希望这可以帮助!