实现鼠标经过时图片放大,点击时顺时针旋转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>