CSS3: transform-origin для каждого transform?

Давайте предполагать, что у меня есть два преобразования в свойстве transform, Эдж:

transform: scale(.5,.5) rotate(10deg);

Который возможный устанавливать исходную точку преобразований используя свойство transform-origin, Эдж:

transform-origin: 0 0;

Но эта исходная точка будет применяться для всех преобразований объекта.

Есть какой-то способ показывать точку отличного источника для каждого преобразования?

Пример используя метод, который он показывает rnd

* {
  margin:0px;
  padding:0px;
}
#a{
  background-color:green;
  width:100px;
  height:100px;
  display: block;
  transition:1s;
  transition-timing-function: linear;
  transform-origin: left top 0;
}
#a:hover{
  transform:scale(.5);
}
#b {
  width:100px;
  height:100px;
  transition:1s;
  transition-timing-function: linear;
  background-color:red;
  transform-origin: right top 0;
}
#b:hover {
  transform: rotate(-90deg);
}
<div id="a"><div id="b"></div></div>
4
задан 20.03.2016, 05:53
2 ответа

ВїHay какой-то способ показывать точку отличного источника для каждый transformaciГіn?

ты не можешь, но всегда можешь использовать два различных элемента, и давать каждому отличный источник.

.externo {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  transform: scale(1, .5);
  transform-origin: 50% 50% 0;
}

.interno {
  background-color: lightblue;
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
  transform-origin: 0 0 0;
}
<div class="externo">
  <img class="interno" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
</div>
3
ответ дан 24.11.2019, 14:42
  • 1
    +1 из-за того, что предлагает альтернативу, чтобы добиваться эффекта, сходного с желанным – Alvaro Montoro♦ 19.03.2016, 23:13

Согласно документации W3C, только возможно определять уникум transform-origin у которого может быть один из следующих форматов:

[left | center | right | top | bottom | <percentage> | <length>]

или

[left | center | right | | <length>] [top | center | bottom | <percentage> |] <length>?

или

[[center | left | right] && [center | top | bottom]] <length>?

А именно, стоимость tranform-origin смоги иметь 1, 2 ó 3 параметра, но это будет единственная стоимость (и не список стоимости), что будет применяться в transform (что да может быть списком).

Так что отвечая на твой вопрос: нет, нет никакого способа показывать точку отличного источника для каждого преобразования, потому что только позволяется единственная стоимость, которая будет применяться ко всем преобразованиям, показанным в transform.

1
ответ дан 24.11.2019, 14:42

Теги

Похожие вопросы