Переходы CSS - rotateX просто меняет размер моего элемента

Question

У меня проблема с переходами CSS. У меня есть две кнопки на моем веб-сайте (here), которые, как предполагается, будут отброшены на ее нижнюю часть, когда мышь удерживает его, как в стартовом меню Windows 8. Вместо этого происходит то, что он просто меняет размер моего элемента и точно так же, как 2D-переход, и любой 3D, который я могу заметить, - это элемент, который отбрасывается наверху. Это не отличается, даже если я устанавливаю количество градусов в положительное или отрицательное. Буду признателен, если кто-то может мне помочь, спасибо. :)

, # metroicons is the container, .metro - элемент, который я пытаюсь повернуть 3d, .metro img - это изображение внутри div и .metro div - это некоторый текст внутри элемента. Вы можете видеть сами here.

#metroicons { 
    padding-left: 5px; 
    padding-top: 5px; 
    perspective: 1000; 
} 

.metro { 
    display: inline-block; 
    height: 120px; 
    transform-style: preserve-3d; 
    transition: transform 0.25s linear; 
    box-shadow: 5px 5px 30px #000; 
} 
.metro:active { 
    transform: rotateX(40deg); 
} 
.metro img { 
    width: 30%; 
    height: 45%; 
    margin-left: 35%; 
    margin-top: 13%; 
} 
.metro div { 
    font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; 
    color: #fff; 
    font-size: 14px; 
    margin-left: 5px; 
    margin-top: 15px; 
} 

Answer 1

Чтобы вы начали.

<div class="tile"> 
</div> 

div.tile { 
    width:100px; 
    height:100px; 
    margin:20px; 
    background:red; 
    -webkit-animation: example 0.75s ease 0s infinite alternate; 
} 
@-webkit-keyframes example { 
    from { 
     -webkit-transform: perspective(300) rotateX(-45deg); 
     -webkit-transform-origin: 0% 0%; 
    } 
    to { 
     -webkit-transform: perspective(300) rotateX(0deg); 
     -webkit-transform-origin: 0% 0%; 
    } 
} 

https://jsfiddle.net/5x0uunkz/