2

Возникла необходимость динамически поворачивать изображения, сверстанные через flexbox, собственно тут выяснилось, что после поворота изображения, для внешнего мира оно все так же продолжает занимать тоже самое положение. Как поведать всем о повороте? Пример: https://jsfiddle.net/x4f1xxqa/1/.

.content {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  flex-wrap: wrap;
}
.element {
  margin: 5px;
}
.img {
  width: 30px;
  height: 60px;
  background-color: red;
}
#img {
  position: relative;
}
#test {
  background-color: black;
}
.rotated {
  transform: rotate(90deg);
}
<div class='content'>
  <div class='element'>
    <div class='img'>
    </div>
  </div>
  <div class='element'>
    <img id='img' class='rotated' width=100px src='http://www.sunhome.ru/UsersGallery/032011/kotiki-foto.jpg'>
  </div>
  <div class='element'>
    <div class='img'>
    </div>
  </div>
  <div class='element'>
    <div class='img'>
    </div>
  </div>
  <div class='element rotated'>
    <div class='img' id='test'>
    </div>
  </div>
  <div class='element'>
    <div class='img'>
    </div>
  </div>
</div>

5
  • ru.stackoverflow.com/q/480285/178988 - там есть два моих ответа.
    – Qwertiy
    1 фев 2016 в 7:28
  • Там решение конечно хорошее, но все же не полное. Оно работает только для угла от 0 до 90. Я еще поиграюсь, сегодня скорее всего доделаю для любого угла. jsfiddle.net/x4f1xxqa/3 1 фев 2016 в 10:11
  • Там есть полное решение для любых углов, но оно со скриптом, рассчитывающим новые размеры.
    – Qwertiy
    1 фев 2016 в 10:25
  • Да, я использовал именно эту функцию. Может я конечно что то делаю не так, но у меня она работает только до 90 градусов. Можешь глянут тут ? jsfiddle.net/x4f1xxqa/5 1 фев 2016 в 10:49
  • Да, что-то у меня не то с формулой... Скажу, если исправлю.
    – Qwertiy
    1 фев 2016 в 10:58

1 ответ 1

0

У меня получилось, но думаю можно это все обобщить в одну общую формулу. Ну а пока главное что работает =)

function rotateImg(img, angle){
  grade = angle;
  grade = grade % 360;
  if( grade <0 ){
    grade+=360;
  }
  angle = grade * Math.PI / 180;
  var width = img.clientWidth, height = img.clientHeight;
  img.style.transform = "rotate(" + angle + "rad)";
  switch( Math.floor( grade / 90 ) ){
    case 0:
      var sina = Math.sin(angle), cosa = Math.cos(angle);
      img.style.left = height*sina + "px";
      img.style.top = "0px";
      var parentStyle = img.parentElement.style;
      parentStyle.width = width*cosa + height*sina + "px";
      parentStyle.height = width*sina + height*cosa + "px";
      break;
    case 1:
      var sina = Math.sin((grade-90) * Math.PI / 180);
      var cosa = Math.cos((grade-90) * Math.PI / 180);
      img.style.left = (height*cosa+width*sina) + "px";
      img.style.top = height*sina + "px";
      var parentStyle = img.parentElement.style;
      parentStyle.height = width*cosa + height*sina + "px";
      parentStyle.width = width*sina + height*cosa + "px";
      break
      case 2:
      var sina = Math.sin((grade-180) * Math.PI / 180);
      var cosa = Math.cos((grade-180) * Math.PI / 180);
      img.style.left = width*cosa + "px";
      img.style.top = (width*sina + height*cosa) + "px";
      var parentStyle = img.parentElement.style;
      parentStyle.height = width*sina + height*cosa + "px";
      parentStyle.width = width*cosa + height*sina + "px";
      break
      case 3:
      var sina = Math.sin((grade-270) * Math.PI / 180);
      var cosa = Math.cos((grade-270) * Math.PI / 180);
      img.style.left = "0px";
      img.style.top = width*cosa + "px";
      var parentStyle = img.parentElement.style;
      parentStyle.height = width*cosa + height*sina + "px";
      parentStyle.width = width*sina + height*cosa + "px";
      break
  }
}

function rotateFun( img ){
  var img = img;
  var angle = 0;
  var start = Date.now(); // сохранить время начала
  var timer = setInterval(function() {
    // вычислить сколько времени прошло с начала анимации
    var timePassed = Date.now() - start;

    if (angle == 360) {
      //clearInterval(timer);// конец через 2 секунды
      //return;
    }
    angle += 2;
    // рисует состояние анимации, соответствующее времени timePassed
    rotateImg( img, angle );

  }, 50);
}
div {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  flex-wrap: wrap;
  border: 1px dotted red;
  text-align: center;
  margin: 1em;
}

span {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  border: 1px dotted green;
  //overflow: hidden;
}

img {
  display: inline-block;
  vertical-align: top;
  transform-origin: 0 0;
  position: relative;
}
<div class='content'>
  <span class='element'>
    <img src='https://placeholdit.imgix.net/~text?txtsize=26&txt=50×100&w=100&h=200'>
  </span>
  <span class='element'>
    <img src='https://placeholdit.imgix.net/~text?txtsize=26&txt=50×100&w=100&h=200' onload="rotateFun( this )">
  </span>
  <span class='element'>
    <img src='https://placeholdit.imgix.net/~text?txtsize=26&txt=50×100&w=100&h=200'>
  </span>
  <span class='element'>
    <img src='https://placeholdit.imgix.net/~text?txtsize=26&txt=50×100&w=100&h=200'>
  </span>
  <span class='element'>
    <img src='https://placeholdit.imgix.net/~text?txtsize=26&txt=50×100&w=100&h=200'>
  </span>
  <span class='element'>
    <img src='https://placeholdit.imgix.net/~text?txtsize=26&txt=50×100&w=100&h=200'>
  </span>
</div>

Пример

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.