Какую формулу использовать при перевороте блока?

Question

[Анатолий]

Имеется перевернутый блок (блок справа), который имеет кнопку.
Нужно перевернув кнопку, разместить ее на прежних координатах, т.е. кнопка должна быть размещена там же, где находится кнопка показанная в левом блоке.
До переворота блок был: width: 480 и height: 270, после поворота блок имеет перевернутый размер, т.е. width: 270 и height: 480.

Для позиционирования использовать только:
bottom, left, right, top
transform: rotate, translate
transform-origin

Формула возможно очень сложная, я покрутил покрутил, но не могу понять закономерность.

Comments

[Данил Остапенко]

Если я правильно понял :

.wrap1 {
  position: fixed;
  overflow: hidden;  
 	top: 5%; left: 5%;
 	width: 270px; height: 480px;  
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.wrap2 {
  position: fixed;
  overflow: hidden;  
 	top: 15%;
  right: -5%;
  width: 480px; height: 270px;
  transform: rotate(-90deg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

video {
  overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;  
  width: 100%;
  height: 100%;
  object-fit: cover
}

.btn1 {
  width: 100%;
  margin: 0 0 60px;
  z-index: 999;  
  display: inline-block;
	background-color: darkred;
	color: #fff;
  text-align: center;
  padding: 15px;
}


.btn2 {
    width: 100%;
    margin: 0 0 60px;
    z-index: 999;
    display: inline-block;
    position: relative;
    background-color: darkred;
    color: #fff;
    text-align: center;
    padding: 15px;
	
  /*transform: rotate(90deg) translate(-50%, -50%);
  transform-origin: 100% 100%;*/
}

[Анатолий]

Arh1diablo, возможно я что-то не так понял, но смотрю ваш пример и не понимаю, что произошло. У правого блока кнопка даже не перевернута. Что Вы хотели сказать этим примером?

[Максим]

Анатолий, вы покажите макет - что хотите добиться - я и в прошлый раз не понял что вы хотите

[Анатолий]

Максим Ленский, я тот вопрос уже решил.
Возможно показывая только часть проблемы, я как-то не полностью освещаю всю проблему, но весь код показывать не хотелось бы ))

[Максим]

Анатолий, тогда не ясно что хотите ... то что вы знаете суть вопроса не говорит о том что все понимают о чём речь

[Анатолий]

Максим Ленский, делаю (уже сделал) видео виджет на сайт типа vidwidget.ru
Суть проблемы была в том, что видео показывается вертикально, а на смартфоне вертикальное изображение записывается как горизонтальное, поэтому нужно блок с видео перевернуть по часовой или против часовой стрелки на 90 градусов.
Но при перевороте изменяется система позиционирования.
Методом тыка изменив bottom, left, right, top, rotate, transform-origin
я получил желаемое.

[Максим]

Анатолий, на много проще - показывать разное видео - для desktop альбомное а для mobile портретное

[Анатолий]

Максим Ленский, согласен, в зависимости от задачи, информацию нужно подавать в определенном формате.

[Анатолий]

Максим Ленский, это не то, это просто изменение размера.
Треш начинается только при перевороте видео.

[Максим]

Анатолий, я просто хочу понять - для чего крутить видео ?

[Анатолий]

Максим Ленский,
https://elements.envato.com/ru/vertical-video-of-w...

[Анатолий]

Максим Ленский, https://elements.envato.com/ru/vertical-video-DAUFE33

[Анатолий]

Максим Ленский, а вот тут можно не переворачивать:
https://www.istockphoto.com/ru/%D0%B2%D0%B8%D0%B4%...

[Максим]

Анатолий, понятно но не понятно для чего это нужно

[Анатолий]

Максим Ленский, что именно не понятно?
зачем виджет?
зачем поворот?
...
?

[Максим]

Анатолий, разворачивать для его ?

[Анатолий]

Максим Ленский, я же отправил 2 примера с видео.
Если их нужно показать, то логичнее перевернуть?
Или Вы привыкли наклонять голову? ))

[Максим]

Анатолий, аааа.... вы про то что такое видео надо повернуть ?

[Анатолий]

Максим Ленский, ну конечно

[Максим]

Анатолий, ну вот так должен был быть задан вопрос - видео изначально развёрнуто и я хочу его привести к нормальному виду и т далее ....

а я голову ломаю - для чего повернуть видос что бы опять его повернуть ... понял

[Анатолий]

Максим Ленский, может я хочу смотреть видео к верху ногами, но этот вопрос уже выходит за рамки CSS. Есть задача, ее нужно решить, а зачем - это уже другой вопрос!

[Максим]

Анатолий, тогда transform-origin поможет

[Анатолий]

Максим Ленский, поможет, я его использую при решении. Но там все сложно было, одного transform-origin - мало!

Answer 1

[Алексей Дубровин]

Тк вы не переворачивайте кнопку, вынесите её из контейнера с видео.
И она у вас всегда будет на том месте, а блок с видео вращайте как хотите.

Comments

[Анатолий]

Спасибо за взгляд со стороны.