gpt4 book ai didi

javascript - 适合容器 jQuery css 中的旋转图像

转载 作者:行者123 更新时间:2023-11-28 19:24:18 25 4
gpt4 key购买 nike

我开发了这个脚本来通过点击按钮来旋转图像...

问题

它旋转得很好,但问题是一旦图像旋转 90 度或 270 度,它就不适合主容器...

我希望它在旋转 90/270 度后适合容器。

$(document).ready(function() {
var degrees = 0;
$("button").click(function rotateMe(e) {
degrees += 90;
//$('.img').addClass('rotated'); // for one time rotation
$(".content").css({
'transform': 'rotate(' + degrees + 'deg)',
'-ms-transform': 'rotate(' + degrees + 'deg)',
'-moz-transform': 'rotate(' + degrees + 'deg)',
'-webkit-transform': 'rotate(' + degrees + 'deg)',
'-o-transform': 'rotate(' + degrees + 'deg)'
});
})
});
.rotated {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}

.img {
transition: all 0.5s ease;
}

.container {
border: 1px solid blue;
display: inline-block;
width: 300px;
margin: 0 auto;
}

div {
border: 1px solid blue;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
<button>
Rotate
</button>
<div class="content">
<img class="img" src="http://projectpuffin.audubon.org/sites/g/files/amh646/f/styles/hero_mobile/public/atpu-scholtz.jpg" />
</div>
</div>

最佳答案

旋转时使用 scale 缩小图像,使用 degrees % 180 了解图像的方向以缩小图像

$(document).ready(function() {
var degrees = 0;
$("button").click(function rotateMe(e) {
degrees += 90;
if (degrees % 180 == 0)
$(".content").css({
'transform': 'rotate(' + degrees + 'deg) scale(1)'
});
else
$(".content").css({
'transform': 'rotate(' + degrees + 'deg) scale(0.8)'
});
})
});
.rotated {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}

.img {
transition: all 0.5s ease;
}

.container {
border: 1px solid blue;
display: inline-block;
width: 300px;
margin: 0 auto;
text-align: center; /* added */
}

div {
border: 1px solid blue;
display: inline-block;
transition: all .5s linear; /* added */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<button>
Rotate
</button>
<div class="content">

<img class="img" src="http://projectpuffin.audubon.org/sites/g/files/amh646/f/styles/hero_mobile/public/atpu-scholtz.jpg" />
</div>
</div>

关于javascript - 适合容器 jQuery css 中的旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56635938/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com