Трансформация

by twobomb three

HTML

<button id="chSize">Изменить размер</button>
<button id="chAngle">Повернуть</button>
<div class="images">
  <img class="imgdrag" src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" > 
  <div class="lt"></div>
  <div class="rt"></div>
  <div class="lb"></div>
  <div class="rb"></div>
 <div class="rot"></div>
</div>

CSS

.images img:active{
  cursor:move;
}
.images img{
  cursor:pointer;
}
body{
  padding:100px;
}
.images{
  user-select:none;
  position:absolute;
  font-size:0px;
  border:2px solid blue;
  display:inline-block;
}
.images .lt{
  left:-6px;
  top:-6px;
}
.images .rt{
  right:-6px;
  top:-6px;
}
.images .lb{
  left:-6px;
  bottom:-6px;
}
.images .rb{
  right:-6px;
  bottom:-6px;
}
.images .lt:hover,.images .rt:hover,.images .lb:hover,.images .rb:hover{
  border:2px solid red;
  cursor:nesw-resize;
}
.images .lt:hover,.images .rb:hover{
  cursor:nwse-resize;  
}
.images .rot:hover{
  transform:rotate(90deg);
  transition:.3s;
}
.images .rot{
  display:none;
  transition:.3s;
  position:absolute;
  top:-20px;
  left:50%;
  background-image:url(https://d30y9cdsu7xlg0.cloudfront.net/png/8336-200.png);
  background-size:cover;
  width:15px;
  height:15px;
}
#chSize,#chAngle{
  position:absolute;
  left:0;
  top:0;
  z-index:10;
  user-select:none;
}
#chAngle
{
  top:20px;
}
.images .lt,.images .rt,.images .lb,.images .rb{
  width:12px;
  display:none;
  height:12px;
  background:#FFF;
  box-sizing:border-box;
  border:2px solid blue;
  position:absolute;
  border-radius:100%;
}

JavaScript

var drag = false;
$("img").each(function(i,el){
	var w = $(el).outerWidth();
	var h = $(el).outerHeight();
	$(el).css({width:w+"px",height:h+"px"})
});
$("#chSize").click(function(){
	if($(this).attr("data-ch") == "true"){
      $(this).attr("data-ch",false);
     $(".images").each((i,e)=>{$(e).css({transform:$(e).attr("data-transform")})})
     $(this).html("Изменить размер");
     $("#chAngle").attr("disabled",false);
      $(".lt,.rt,.lb,.rb").each(function(i,e){$(e).css({display:"none"})});
     }
     else{
     $(".images").css({transform:"rotate(0deg)"});
     $("#chAngle").attr("disabled",true);
     $(this).html("Отмена");
      $(this).attr("data-ch",true);
      $(".lt,.rt,.lb,.rb").each(function(i,e){$(e).css({display:"block"})});
     }
});


$("#chAngle").click(function(){
	if($(this).attr("data-ch") == "true"){
      $(this).attr("data-ch",false);
     $(this).html("Повернуть");
     $("#chSize").attr("disabled",false);
      $(".rot").each(function(i,e){$(e).css({display:"none"})});
     }
     else{
     $(this).html("Отмена");
     $("#chSize").attr("disabled",true);
      $(this).attr("data-ch",true);
      $(".rot").each(function(i,e){$(e).css({display:"block"})});
     }
});



$(".images .lt,.images .rt,.images .lb,.images .rb,.images img, .images .rot").bind("mousedown",function(e){
	drag = this;
  var par = $(drag).parent();
  switch($(this).attr("class")){
    case "imgdrag":
        $(par).attr("data-offset-x",e.pageX - $(this).offset().left);
          $(par).attr("data-offset-y",e.pageY  - $(this).offset().top);
    	return false;
      break;
     case "rot":break;
      default:
  $(par).attr("data-last-x",e.pageX);
    $(par).attr("data-last-y",e.pageY);
      
      }
});
$(document).bind("mousemove",function(e){
	if(!drag || e.pageX < 0 || e.pageY < 0)
  return;
  var par = $(drag).parent();
  var img = $(par).find("img");
  switch($(drag).attr("class")){
  case "lt"://Если тащим за левый верхний угол
    var w =...