Javascript-форум - Проблемы с с css3 свойством webkitTransform

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Проблемы с с css3 свойством webkitTransform (https://javascript.ru/forum/events/42064-problemy-s-s-css3-svojjstvom-webkittransform.html)

Проблемы с с css3 свойством webkitTransform

Здравствуйте!

Пишу скрипт, который будет изменять угол положения изображения и обрезать ее. Возникла проблема на стадии "вращения" (rotate).

HTML:

<body>
  <img id="img" src="http://f4.s.qip.ru/V4IuUgU2.jpg" width="400px" height="250px">
  <main>
  <fieldset>
    <legend>Rotate</legend>
    <input id="input" oninput="rotatePic()" type="range" min="1" max="9" step="1" value="1">
  </fieldset>
</main>    
</body>

CSS:

Код:

html {

  background-color:rgb(83,151,171);}



main {

  position:absolute;}



img {

  position:absolute;

  border:5px solid white;

  border-radius:10px;

  margin:15% 30%;}

JS:

function rotatePic() {
    
     var inputValue, img, transform;
     inputValue = document.getElementById("input").value;
     img = document.getElementById("img");
     transform = img.style.webkitTransform;
  
    switch (inputValue) {
      case 2: transform = "rotate(45deg)";
      case 3: transform = "rotate(90deg)";
      case 4: transform = "rotate(135deg)";
      case 5: transform = "rotate(180deg)";
      case 6: transform = "rotate(225deg)";
      case 7: transform = "rotate(270deg)";
      case 8: transform = "rotate(315deg)";
      case 9: transform = "rotate(360deg);"
    default: inputValue = 0;} 
      
}

izbash, ты внимательно почитай как работает switch... ;)
А особенно это место

Цитата:

При этом равенство подразумевается в смысле оператора "===", сравнивать с регулярным выражением или как-то еще switch не умеет.

http://javascript.ru/switch

izbash, еще...
Такая конструкция

transform = img.style.webkitTransform;
...
transform = "rotate(45deg)";

Чистая бессмыслица... Это не "крутнет". :no:
Делай так челе...

transform = "rotate(45deg)";
...
img.style.webkitTransform=transform;

Так же внимательно присмотритесь на той же странице к "Пример: switch без break"

Огромная вам благодарность!

Поменял JS:

function rotatePic() {
    var inputValue, img;
    inputValue = document.getElementById("input").value;
    img = document.getElementById("img");
  switch (inputValue) {
    case "1": img.style.webkitTransform = ""
      break
    case "2": img.style.webkitTransform = "rotate(45deg)"
      break
    case "3": img.style.webkitTransform = "rotate(90deg)"
      break
    case "4": img.style.webkitTransform = "rotate(135deg)"
      break
    case "5": img.style.webkitTransform = "rotate(180deg)"
      break
    default: alert (false)
  } 
}

Все заработало!

Может кому то пригодится http://codepen.io/izbash/pen/exHdg