title: CSS: How to use Transform property on a bootstrap grid class
body: <p>I am trying to use the <code>transform</code> property in CSS3 on a bootstrap a <code>class="col-sm-4"</code> div, the problem is I don't have a width or a height specified, and so the transform property is not working. Here is the current code </p>
  
  <p>Bootstrap HTML</p>
  
  <pre><code>&lt;div class="col-sm-4" class="threed"&gt;
      &lt;div class="services-box"&gt;
          &lt;img src="img/food-pic1.png" alt="food delivery" width="40%" height="30%"&gt;
          &lt;h4&gt; Food Delivery&lt;hr&gt;&lt;/h4&gt;
          &lt;p&gt; We delivery food straight to your doorstep. Now you don't have to worry about anything! &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.row {
     margin-left: 0%;
  }
  </code></pre>
  
  <p>Property I want to add (but doesn't work)</p>
  
  <pre><code>.col-sm-4:hover {
     box-shadow: 1px 1px #53a7ea,
                 2px 2px #53a7ea,
                 3px 3px #53a7ea;
     -webkit-transform: translateX(-3px);
     transform: translateX(-3px);
  }
  </code></pre>
  
  <p>Any help would be appreciated!</p>