英文:
How to flip an image without moving it
问题
在下面的示例中，单击标志，您会看到 - 它被翻转了，但也被移动了
如何在不移动的情况下翻转它？
我也尝试过这个，但没有成功：
.flip{transform:scaleX(-1);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap'>
<img src='https://abuena.net/img/logo_01.png' alt='img'>
</div>
英文:
In the example below, click on logo and you'll see - it is flipped but also moved
How to flip it without moving ?
I also tried this, without success:
.flip{transform:scaleX(-1) translatex(-50%);}
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('img').on('click', function(){
$(this).addClass('flip');
});
<!-- language: lang-css -->
.flip{transform:scaleX(-1);}
.wrap{
position:relative;
width:50%;
height:100px;
background:darkorange;
}
img{
position:absolute;
bottom:0;
width:140px;
left:50%;
transform:translatex(-50%);
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap'>
<img src='https://abuena.net/img/logo_01.png' alt='img'>
</div>
<!-- end snippet -->
答案1
得分: 6
你还需要在.flip类中包括translate属性。
注意属性的顺序很重要，例如在translate之前加上scale，之后会给你不同的输出：
.flip {
transform: translateX(-50%) scaleX(-1);
}
英文:
You also need to include the translate property in the .flip class.
Note that the order of properties is important, eg. scale before translate, and after will give you different outputs:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('img').on('click', function() {
$(this).toggleClass('flip');
});
<!-- language: lang-css -->
.flip {
transform: translateX(-50%) scaleX(-1);
}
.wrap {
position: relative;
width: 50%;
height: 100px;
background: darkorange;
}
img {
position: absolute;
bottom: 0;
width: 140px;
left: 50%;
transform: translateX(-50%);
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap'>
<img src='https://abuena.net/img/logo_01.png' alt='img'>
</div>
<!-- end snippet -->
答案2
得分: 3
需要对 scaleX -1 应用相反的 translateX 以抵消效果：
.flip{
transform: scaleX(-1) translateX(50%);
}
请注意，“新”的 transform 会替换掉所有现有的 transform 属性，它们不会叠加。
$('img').on('click', function(){
$(this).toggleClass('flip');
});
.flip{
transform: scaleX(-1) translateX(50%);
}
.wrap{
position:relative;
width:50%;
height:100px;
background:darkorange;
}
img{
position:absolute;
bottom:0;
width:140px;
left:50%;
transform: translateX(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap'>
<img src='https://abuena.net/img/logo_01.png' alt='img'>
</div>
英文:
You need to apply an opposite translateX to counter the scaleX -1:
.flip{
transform:scaleX(-1) translatex(50%)
}
Note that a "new" transform will replace all of the existing transform properties, they do not add on.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('img').on('click', function(){
$(this).toggleClass('flip');
});
<!-- language: lang-css -->
.flip{
transform:scaleX(-1) translatex(50%)
}
.wrap{
position:relative;
width:50%;
height:100px;
background:darkorange;
}
img{
position:absolute;
bottom:0;
width:140px;
left:50%;
transform:translatex(-50%);
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap'>
<img src='https://abuena.net/img/logo_01.png' alt='img'>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论