CSS：如何在引导网格类上使用 Transform 属性答案

【问题标题】：CSS: How to use Transform property on a bootstrap grid classCSS：如何在引导网格类上使用 Transform 属性
【发布时间】：2016-12-09 09:46:36
【问题描述】：

我试图在引导程序 class="col-sm-4" div 上使用 CSS3 中的 transform 属性，问题是我没有指定宽度或高度，因此转换属性不起作用。这是当前代码

引导 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%;
}

我想添加的属性（但不起作用）

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

任何帮助将不胜感激！

【问题讨论】：

标签： twitter-bootstrap css css-transitions

【解决方案1】：

如果你这样做，不要将css 应用于引导类，你网站中的整个引导类都会得到css，所以我建议使用自定义类或应用它在.col-sm-4 上，您应该指定其父级以避免将css 应用于使用col-sm-4 的整个网站。

这是一个sn-p

.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>

【讨论】：

【解决方案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 属性。

【讨论】：