Html 使用 css 水平翻转背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24958844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flip a background image horizontally using css
提问by user3877471
How can I flip an existing image that I have horizontally for a specific class? I was looking at this thread, How to flip background image using CSS?, but none of the answers worked for me.... Any suggestions on what I can do? Here is the code I have written so far that has not been working:
如何为特定班级水平翻转现有图像？我在看这个线程，如何使用 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);
}
回答by Idrees
I use this CSS class in my projects to flip elements:
我在我的项目中使用这个 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;
}
回答by user3877471
here is the code. it is working
这是代码。这是工作
<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>
And the css :
和 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;
}
