CSS:如何在引导程序网格类上使用Transform属性

Question

我正试图在引导程序上使用CSS3中的transform属性。对于class="col-sm-4"div，问题是我没有指定宽度或高度，因此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);
}

任何帮助都将不胜感激！

Answer 1

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

以下是的片段

.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，您可以仅针对box-shadow而不是all，当然也可以更改时间。

转换需要一个默认模板来更改，并且不会为所讨论的对象假定不可见的css属性。