چرخش عکس با jQuery

در این آموزش , قصد داریم به شما نحوه ایجاد چرخش عکس با jQuery را نشان بدیم . در آموزش قبلی نحوه تغییر پس زمینه تصویر در jQuery را دیدیم.

در این مثال از ایجاد چرخش عکس (rotate) , ما از تابع animate در جی کوئری استفاده می کنیم. با استفاده از این تابع ما خاصیت transform تصویر را کنترل می کنیم.

کد HTML با دکمه های چرخش

این کد به شما المنت تصویر و لیست دکمه ها برای ایجاد چرخش عکس با jQuery را نشان می دهد.

<div>
<label>Rotate Image:</label>
<input type="button" class="btnRotate" value="90" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="-90" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="180" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="360" onClick="rotateImage(this.value);" />
</div>
<div><img src="coffee.jpg" id="demo-image" /></div>

<div>

<label>Rotate Image:</label>

</div>

تابع چرخش عکس با jQuery

این تابع جی کوئری با تغییر خاصیت transform تصویر افکت چرخش را ایجاد می کند.

function rotateImage(degree) {
	$('#demo-image').animate({  transform: degree }, {
    step: function(now,fx) {
        $(this).css({
            '-webkit-transform':'rotate('+now+'deg)', 
            '-moz-transform':'rotate('+now+'deg)',
            'transform':'rotate('+now+'deg)'
        });
    }
    });
}