Question

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

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

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

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

任何帮助将不胜感激！

Answer 1

我通过将.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属性。

Answer 2

如果您这样做，请不要将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>

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

2 个答案: