我试图在单击时向右旋转该图像
每次单击，图像都会向右旋转 90 度，因此单击 4 次会将其恢复到原始位置。
由于某种原因，将类（rotateimg90）分配给图像不起作用。
function rotate90(){
alert('rotate!')
$('.theImage').addClass('rotateimg90');
}
.btn-floating-container {
top:50px;
left:50px;
position: fixed;
}
.btn-floating {
width: 150px;
height: 50px;
border-radius: 50%;
text-align: center;
padding: 0px;
font-size: 24px;
}
.rotateimg90 {
-webkit-transform:rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-floating-container">
<button class="btn-floating btn btn-primary btn-medium" onclick="rotate90()">ROTATE</button>
</div>
<img id="theImage" src="https://images.unsplash.com/photo-1533467915241-eac02e856653?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
首先，您必须使用$('#theImage')因为您是通过 id 引用的。尝试下面的代码。
let angle = [0, 90, 180, 270];
let current = 0;
function rotate90() {
current++;
if (current == 4)
current = 0;
$('#theImage').css('transform', 'rotate(' + angle[current] + 'deg)');
}
.btn-floating-container {
top: 50px;
left: 50px;
position: fixed;
z-index: 1;
}
.btn-floating {
width: 150px;
height: 50px;
border-radius: 50%;
text-align: center;
padding: 0px;
font-size: 24px;
}
.rotateimg90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-floating-container">
<button class="btn-floating btn btn-primary btn-medium" onclick="rotate90()">ROTATE</button>
</div>
<img id="theImage" src="https://images.unsplash.com/photo-1533467915241-eac02e856653?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
