CSS: Wie Transform Eigenschaft in einem Bootstrap Grid-Klasse verwenden

Question

Ich versuche, die transform -Eigenschaft in CSS3 auf einem Bootstrap a class="col-sm-4" div zu verwenden, das Problem ist, ich habe keine Breite oder Höhe angegeben, und so die Transformationseigenschaft funktioniert nicht. Hier ist der aktuelle Code

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 möchte ich hinzufügen (aber nicht funktioniert)

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

Jede mögliche Hilfe würde geschätzt !

Answer 1

Gelten css nicht Klassen Bootstrap, wenn Sie dies tun, werden die gesamten Bootstrap-Klassen in Ihrer Website, dass css bekommen, so dass ich mit einer benutzerdefinierten Klasse oder wende es auf .col-sm-4 Sie sollten angeben, seine Eltern empfehlen um zu vermeiden, css auf die ganze Website anzuwenden, wo col-sm-4 verwendet wird. Hier

ist ein Schnipsel

.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

ich es feste .col-sm-4 als

durch die Definition

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

Dann sollte der Hover-Effekt ein- und ausgeblendet. Sie können nur box-shadow anstelle von all für transition zielen und natürlich auch die Zeit ändern.

Der Übergang erfordert eine Standardvorlage, von der aus eine nicht sichtbare CSS-Eigenschaft für das betreffende Objekt geändert werden soll.