Вопрос по transform, css, css3 – Как применить несколько преобразований в CSS?

460

Используя CSS, как я могу применить более одногоtransform?

Пример: далее применяется только перевод, а не вращение.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

Ваш Ответ

9   ответов
-3

-webkit-transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ;
transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;

Я использую инструмент enjoycss

http://enjoycss.com/5C#transform

он генерирует код CSS для требуемых параметров преобразования, используя графический интерфейс для генерации кода преобразования;)

enter image description here

37

что он может быть полезным, а только потому, что это правда.

Помимо использования существующих ответов, объясняющих, как сделать более одного перевода, связав их по цепочке, вы также можетепостроить матрицу 4х4 самостоятельно

Я взял следующее изображение изкакой-то случайный сайт, который я нашел во время поиска в Google который показывает вращательные матрицы:

Вращение вокруг оси x:Rotation around x axis
Вращение вокруг оси y:Rotation around y axis
Вращение вокруг оси z:Rotation around z axis

Я не смог найти хороший пример перевода, так что, если я правильно помню / понимаю, перевод:

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

Смотрите больше наСтатья в Википедии о трансформации так же какучебник Pragamatic CSS3 что объясняет это довольно хорошо. Другое руководство, которое я нашел, которое объясняет произвольные матрицы вращения:Заметки Эгона Рата о матрицах

Конечно, умножение матриц работает между этими матрицами 4x4, поэтому для выполнения поворота с последующим переводом необходимо создать соответствующую матрицу поворота и умножить ее на матрицу перевода.

Это может дать вам немного больше свободы, чтобы сделать все правильно, а также сделает практически невозможным для любого понять, что он делает, включая вас за пять минут.

Но, вы знаете, это работает.

Редактировать: я только что понял, что пропустил упоминание, вероятно, самого важного и практического использования этого, которое заключается в постепенном создании сложных трехмерных преобразований с помощью JavaScript, где вещи будут иметь немного больше смысла.

Как ссылка 9elements :(
@MattSach Хорошо, по-видимому, «позже сегодня» для меня означает «спустя шесть месяцев», но по крайней мере ссылка 9elements исправлена (кто-то еще исправил случайную ссылку сайтов с Wayback, и я последовал их примеру.)
это действительно не вписывается в эту тему
Я также сделалthis чтобы помочь вам понять их.
& Quot; Случайный сайт & quot; на mines.edu, к сожалению, сейчас мертвая ссылка.
779

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

Когда у вас есть несколько директив преобразования, будет применена только последняя. Это похоже на любой другой атрибут CSS.

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

Это:transform: scale(1,1.5) rotate(90deg);
а также:transform: rotate(90deg) scale(1,1.5);

будутnot дать тот же результат:https://jsfiddle.net/852hzq9w/

Я попытался разделить их на "," как это было сделано с несколькими тенями, но это не сработало. Спасибо. Ben
transform: translate (100px, 100px) rotate (45deg) переводчик (100px, 100px) rotate (45deg); равно преобразование: translate (200px, 200px) rotate (90deg), последний добавит
Можно ли применить одно преобразование перед другим ... как перекос перед поворотом. Что касается меня, независимо от того, что я делаю, элемент сначала поворачивается, а затем наклоняется, что приводит к тому, что я не хочу.
Возможно, вам придется включить префикс для работы преобразования во всех браузерах. Посмотри пожалуйстаthis post для дополнительной информации
так что теперь можно разбить их на несколько строк
18

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}
0

CSS, если вы повторяете 2 или более значений, всегда применяется последнее, если не используется!important тег, но в то же время избегайте использования!important столько, сколько вы можете, так что в вашем случае это проблема, поэтому второе преобразованиеoverride первый в этом случае ...

So how you can do what you want then?...

Don't worry, transform принимает несколько значений одновременно ... Так что этот код ниже будет работать:

li:nth-child(2) {
  transform: rotate(15deg) translate(-20px, 0px); //multiple
}

Если вы хотите поиграть с Transform, запустите iframe изMDN ниже:

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

Посмотрите на ссылку ниже для получения дополнительной информации:

& Л; & л; CSS трансформация & gt; & gt;

2

li:nth-child(2) {
    rotate: 15deg;
    translate:-20px 0px;        
}

Это станет особенно полезным при применении отдельных классов к элементу:

<div class="teaser important"></div>

.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}

Этот синтаксис определен в процессеCSS трансформирует спецификацию уровня 2, но не могу найти ничего о текущей поддержке браузера, кроме Chrome Canary. Надеюсь, что когда-нибудь я вернусь и обновлю поддержку браузера здесь;)

Нашел информацию вЭта статья которые вы можете проверить в отношении обходных путей для текущих браузеров.

-1

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}

But also don't forget that you need to add prefix to let it work in all browsers as some browers like safari, IE not support tranform property without prefix.

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
    -moz-transform : translate(-20px, 0px) rotate(15deg);
    -webkit-transform : translate(-20px, 0px) rotate(15deg);
    -o-transform : translate(-20px, 0px) rotate(15deg);
    -ms-transform : translate(-20px, 0px) rotate(15deg);
}
@lolzerywowzery рвать тогда
-moz-transform а также-o-transform не нужны уже как 5 лет! И-ms-transform будет только расширять совместимость с Windows Vista, которой больше никто не занимается. Я просто ненавижу, когда люди тратят драгоценное пространство с бесполезными презумптивными префиксами браузера. Это просто заставляет меня хотеть рвать.
0

Transform Rotate and Translate in single line css:-How?

div.className{
    transform : rotate(270deg) translate(-50%, 0);    
    -webkit-transform: rotate(270deg) translate(-50%, -50%);    
    -moz-transform: rotate(270deg) translate(-50%, -50%);    
    -ms-transform: rotate(270deg) translate(-50%, -50%);    
    -o-transform: rotate(270deg) translate(-50%, -50%); 
    float:left;
    position:absolute;
    top:50%;
    left:50%;
    }
<html>
<head>
</head>
<body>
<div class="className">
  <span style="font-size:50px">A</span>
</div>
</body>
</html>

20

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

<h3 class="rotated-heading">
    <span class="scaled-up">Hey!</span>
</h3>
<style type="text/css">
.rotated-heading
{
    transform: rotate(10deg);
}

.scaled-up
{
    transform: scale(1.5);
}
</style>

Это может быть очень полезно при анимации элементов с помощью преобразования с использованием Javascript.

Вы забываетеtransform-style: preserve-3d
Это не существенно для вложенных 2d-преобразований - зависит от желаемого результата. Transform-origin, скорее всего, пригодится.

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