Как преобразовать в направлении X и Y только с CSS

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

Fiddle Project is Here

если добавить Y переход парить он принимает только 2-й переход и игнорирование 1-й переход Нравится (-а)

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

Надежда это помогает!