CSS：ブートストラップグリッドクラスでTransformプロパティを使用する方法

Question

class="col-sm-4" divのブートストラップでCSS3のtransformプロパティを使用しようとしていますが、幅や高さが指定されていないという問題があります。 transformプロパティが機能していません。ここで任意の助けをいただければ幸いです

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

現在のコード

ブートストラップ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%; 
} 

プロパティ私は追加したいです（ただし、動作しません） ！

Answer 1

あなたがそうするならば、あなたのウェブサイト全体のブートストラップ・クラスがcssことを取得するクラスをブートストラップするcssを適用しないでください、私はあなたがその親を指定する必要がありカスタムクラスを使用することをお勧めしますか.col-sm-4にそれを適用しますcol-sm-4が使用されているウェブサイト全体にCSSを適用しないようにします。ここで

は

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

を定義することによって、それを修正。 transitionの代わりにallの代わりにbox-shadowをターゲットにすることはもちろん、時間も変更できます。

移行には、デフォルトのテンプレートを変更する必要があり、問題のオブジェクトの非表示のCSSプロパティは想定しません。