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)

izbash 11.10.2013 08:05

Проблемы с с 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;} 
      
}

ksa 11.10.2013 08:44

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

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

ksa 11.10.2013 08:48

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

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

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

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

BETEPAH 11.10.2013 08:50

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

izbash 11.10.2013 09:17

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

Поменял 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)
  } 
}


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

izbash 11.10.2013 09:18

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


Часовой пояс GMT +3, время: 06:34.