CSS: Как использовать свойство Transform в классе сетки bootstrap

Question

Я пытаюсь использовать свойство transform в CSS3 на загрузочном блоке a class="col-sm-4" div, проблема в том, что у меня нет указанной ширины или высоты, и поэтому свойство transform не работает. Вот текущий код

Bootstrap HTML

<div class="col-sm-4" class="threed"> 
    <div class="services-box"> 
     <img src="img/food-pic1.png" alt="food delivery" width="40%" height="30%"> 
     <h4> Food Delivery<hr></h4> 
     <p> We delivery food straight to your doorstep. Now you don't have to worry about anything! </p> 
    </div> 
</div> 

CSS

.row { 
    margin-left: 0%; 
} 

Property Я хочу добавить (но не работает)

.col-sm-4:hover { 
    box-shadow: 1px 1px #53a7ea, 
       2px 2px #53a7ea, 
       3px 3px #53a7ea; 
    -webkit-transform: translateX(-3px); 
    transform: translateX(-3px); 
} 

Любая помощь будет оценена !

Answer 1

Не применять css для начальной загрузки классов, если вы так, целые классы начальной загрузки на веб-сайт будет получить, что css, поэтому я буду рекомендовать, используя пользовательский класс или применить его на .col-sm-4 вы должны указать его родителя чтобы избежать применения css на весь сайт, где используется col-sm-4.

Вот это SNIPPET

.threed{ 
 
-webkit-transform: translateX(0); 
 
    transform: translateX(0); 
 
-webkit-transition:all 0.3s ease; 
 
    transition:all 0.3s ease; 
 
} 
 

 
.threed:hover { 
 
    box-shadow: 1px 1px #53a7ea, 
 
       2px 2px #53a7ea, 
 
       3px 3px #53a7ea; 
 
    -webkit-transform: translateX(3px); 
 
    transform: translateX(3px); 
 
}

<div class="col-sm-4 threed"> 
 
    <div class="services-box"> 
 
     <img src="img/food-pic1.png" alt="food delivery" width="40%" height="30%"> 
 
     <h4> Food Delivery<hr></h4> 
 
     <p> We delivery food straight to your doorstep. Now you don't have to worry about anything! </p> 
 
    </div> 
 
</div>

Answer 2

Я установил ее, определив .col-sm-4, как

.col-sm-4 { 
    ...; 
    transition: all .5s; 
    box-shadow: 0px 0px rgba(0,0,0,0), 
       0px 0px rgba(0,0,0,0), 
       0px 0px rgba(0,0,0,0); 
} 

Тогда эффект парения должен исчезать и выходить. Вы можете использовать только box-shadow вместо all для transition, и, конечно, тоже измените время.

Переход требует шаблона по умолчанию, который необходимо изменить, и не предполагает наличие невидимых свойств css для рассматриваемого объекта.