Здравствуйте!
Пишу скрипт, который будет изменять угол положения изображения и обрезать ее. Возникла проблема на стадии "вращения" (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;}
}