Как повернуть картинку?

В общем у меня навязчивая мысль сделать такой блок, который бы крутился не вокруг своего центра как (пробовал юзать rotate()) в случае с rotate а что бы типо вокруг вертикали, в плане есть высота, берем высоту, и в центр блока, и вокруг этой высоты вращать блок) надеюсь объяснил понятно, если какие то уточнения то пишите)

        
.
box {
height:auto;
width:300px;
transition:1s;
}
.
box:hover {
border:1px solid gray;
transform: rotate3d(0, 1, 0, 20deg);
}

.
text {
padding:10px;
}

<div class="container" style="margin-top:60px;">
<div
class="row">
<div
class="col-md-4 box">
<div
class="col-md-12 text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis dicta mollitia architecto commodi tempore dolor velit molestias ipsum animi, accusantium sint. Ad fuga doloribus architecto exercitationem et vel, veniam pariatur.

<div
class="col-md-4 box">
<div
class="col-md-12 text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente vitae excepturi, quaerat praesentium consequuntur earum voluptatibus. Neque eligendi incidunt veniam. Dignissimos itaque delectus alias. Vitae nostrum molestias debitis sequi sint!

<div
class="col-md-4 box">
<div
class="col-md-12 text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis totam soluta ex harum voluptates dicta dolor dolorum tenetur saepe inventore voluptas officiis sed est consectetur magni alias, dignissimos nisi qui.


Думаю это то что ты имел ввиду, обычный rotate двигает в двухмерной площади, тут же используем трехмерный и показываем что двигать хотим по оси y и 4 параметром указываем на сколько градусов, если поставить 180 то блок развернется.