CSS에 여러 변환을 적용하는 방법은 무엇입니까?


602

CSS를 사용하여 둘 이상을 어떻게 적용 할 수 transform있습니까?

예 : 다음에서는 회전이 아닌 평행 이동 만 적용됩니다.

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

답변:


993

다음과 같이 한 줄에 배치해야합니다.

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);

없는 동일한 결과를 생성 :

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}
<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>


55
여러 개의 그림자를 사용하는 것처럼 ""로 분리하려고 시도했지만 작동하지 않았습니다. 감사합니다.
Ben

2
회전하기 전에 비뚤어 짐과 같은 다른 변형 전에 한 변형을 적용 할 수 있습니까? 내가 무엇을하든, 요소가 먼저 회전 한 다음 기울어 져서 내가 원하는 것이 아닌 것을 초래합니다.
Muhammad Umer

2
따라서 여러 줄로 분할 할 수 없습니다
aWebDeveloper

2
변환 : 번역 (100px, 100px) 회전 (45deg) 번역 (100px, 100px) 회전 (45deg); equals transform : translate (200px, 200px) rotate (90deg), 마지막 것 추가
bigCat

3
@ jave.web, 당신은 오른쪽에서 왼쪽을 의미 합니까? 의 경우 transform: scale(1,1.5) rotate(90deg);회전은 스케일 전에 발생합니다.
Jargs

43

도움이 될 가능성이 아니라 사실이기 때문에이 답변을 추가하고 있습니다.

체인을 연결하여 둘 이상의 번역을 만드는 방법을 설명하는 기존 답변을 사용하는 것 외에도 4x4 행렬을 직접 구성 할 수도 있습니다.

인터넷 검색 중에 찾은 임의의 사이트 에서 다음 이미지를 가져 와서 회전 행렬을 보여줍니다.

x 축 주위 회전 : x 축을 중심으로 회전
y 축 y 축을 중심으로 회전
주위 회전 : z 축 주위 회전 :z 축을 중심으로 회전

번역의 좋은 예를 찾을 수 없으므로 번역을 기억하고 이해한다고 가정하면 번역은 다음과 같습니다.

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

상기 더보기 변환에 위키 백과 문서 뿐만 아니라 Pragamatic CSS3 튜토리얼 오히려 잘 설명합니다. 임의 회전 행렬을 설명하는 또 다른 안내서는 행렬에 대한 Egon Rath의 노트입니다.

행렬 곱셈은 물론이 4x4 행렬 사이에서 작동하므로 회전을 수행 한 다음 이동을 수행하려면 적절한 회전 행렬을 만들고 변환 행렬을 곱하십시오.

이를 통해 올바른 정보를 얻을 수있는 자유가 조금 더 생길 수 있으며, 5 분 안에 귀하를 포함하여 누구든지 자신이하는 일을 이해하는 것이 거의 불가능할 것입니다.

그러나 당신은 알고 있습니다.

편집 : 방금 JavaScript를 통해 복잡한 3D 변형을 점진적으로 만드는 것입니다.


3
mines.edu의 "무작위 사이트"는 불행히도 현재는 죽은 링크입니다.
Matt Sach

1
9elements 링크와 마찬가지로 :(
Matt Sach

1
@MattSach Ok, 분명히 "나중에 오늘"은 "6 개월 후"를 의미하지만 적어도 9 요소 링크는 고정되어 있습니다 (다른 사람은 Wayback과 함께 임의 사이트 링크를 수정했으며 그 리드를 따랐습니다)
Jeff

1
나는 또한 당신이 그들을 이해하도록 돕기 위해 이것을 만들었 습니다.
alex

6
이것은이 주제에 맞지 않습니다
user151496

24

추가 마크 업 레이어를 사용하여 여러 변형을 적용 할 수도 있습니다. 예 :

<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
Jack Giffin

중첩 된 2D 변환에는 필요하지 않습니다. 원하는 결과에 따라 다릅니다. 변형 기원은 가장 유용 할 것입니다.
richtelford

21

다음과 같이 둘 이상의 변환을 적용 할 수 있습니다.

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

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 Transforms Level 2 사양 에 정의되어 있지만 크롬 카나리아 이외의 현재 브라우저 지원에 대해서는 아무것도 찾을 수 없습니다. 언젠가 다시 돌아와서 브라우저 지원을 업데이트하겠습니다.)

이 기사 에서 현재 브라우저의 해결 방법에 대해 확인할 수 있는 정보를 찾았습니다 .


1

CSS 에서 시작하여 2 개 이상의 값을 반복하면 !important태그를 사용하지 않는 한 항상 마지막 값이 적용 되지만 !important가능한 한 많이 사용하지 마십시오 . 따라서 문제가 있으므로 두 번째 이 경우 첫 번째 변환을 재정의 하십시오.

그렇다면 원하는 것을 어떻게 할 수 있습니까? ...

걱정하지 마십시오 . 변환은 동시에 여러 값을 허용합니다. 따라서 아래 코드는 작동합니다.

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

변형으로 놀고 싶다면 아래 MDN 에서 iframe을 실행하십시오 .

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

자세한 내용은 아래 링크를 참조하십시오.

<< CSS 변환 >>


0

한 줄로 회전 및 번역 변환 CSS :-어떻게?

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>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.