实现鼠标经过时图片放大,点击时顺时针旋转90度。需引入jquery
<style>
.scaleImg:hover{
z-index: 1;
transform: scale(3, 3);
transition: .3s transform;
}
</style>
<img class="scaleImg" src="xxxxx.jpg"/>
<script>
$(document).ready(function(){
$(".scaleImg").each(function(){
$(this).click(function(){
var deg = $(this).attr("deg");
if(deg == null){
deg = 0;
}
deg = parseInt(deg) + 90;
$(this).attr("deg",deg);
$(this).mouseover(function(){
$(this).css('-webkit-transform', 'rotate(' + deg + 'deg) scale(3, 3)');
$(this).css('-moz-transform', 'rotate(' + deg + 'deg) scale(3, 3)');
$(this).css('-ms-transform', 'rotate(' + deg + 'deg) scale(3, 3)');
$(this).css('-o-transform', 'rotate(' + deg + 'deg) scale(3, 3)');
$(this).css('transform', 'rotate(' + deg + 'deg) scale(3, 3)');
});
$(this).mouseout(function(){
$(this).css('-webkit-transform', 'rotate(' + deg + 'deg)');
$(this).css('-moz-transform', 'rotate(' + deg + 'deg)');
$(this).css('-ms-transform', 'rotate(' + deg + 'deg)');
$(this).css('-o-transform', 'rotate(' + deg + 'deg)');
$(this).css('transform', 'rotate(' + deg + 'deg)');
});
$(this).mouseout();
$(this).mouseover();
});
});
});
</script>