Question

如何为特定班级翻转水平的现有图像？我正在看这个帖子How to flip background image using CSS?，但没有一个答案对我有用......对我能做什么的任何建议？这是我到目前为止编写的代码，但尚未起作用：

.cta-dash-green2 > span {

  display: inline-block;
  height: 17px;
  vertical-align: middle;
  width: 17px;
  margin: 0 5px 0 0;
  background: url("../images/icon-cta-dash-green.png");

  -webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);

}

Answer 1

我在项目中使用这个CSS类来翻转元素：

.flip-it {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: "FlipH";
    filter: FlipH;
}

Answer 2

这是代码。它正在运作

  <div id="f1_container">
   <div id="f1_card" class="shadow">
    <div class="front face">
      <img src="/images/Cirques.jpg"/>
     </div>
     <div class="back face center">
      <p>This is nice for exposing more information about an image.</p>
      <p>Any content can go here.</p>
     </div>
    </div>
   </div>

和css：

 #f1_container {
 position: relative;
 margin: 10px auto;
 width: 450px;
 height: 281px;
 z-index: 1;
 }
 #f1_container {
 perspective: 1000;
 }
 #f1_card { 
 width: 100%;
 height: 100%;
 transform-style: preserve-3d;
 transition: all 1.0s linear;
 }
 #f1_container:hover #f1_card {
 transform: rotateY(180deg);
 box-shadow: -5px 5px 5px #aaa;
 }
 .face {
 position: absolute;
 width: 100%;
 height: 100%;
 backface-visibility: hidden; 
 }
.face.back {
 display: block;
 transform: rotateY(180deg);
 box-sizing: border-box;
 padding: 10px;
 color: white;
 text-align: center;
 background-color: #aaa;
 }

使用css水平翻转背景图像

2 个答案: