CSS에서 다중 변환을 적용하는 방법은 무엇입니까?

CSS에서 다중 변환을 적용하는 방법은 무엇입니까?

CSS를 사용하여 두 개 이상을 적용하려면 어떻게 해야 합니까?transform?

예:다음에서는 회전이 아닌 변환만 적용됩니다.

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

다음과 같이 한 줄에 놓아야 합니다.

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>

도움이 될 것 같아서가 아니라 사실이기 때문에 이 답변을 덧붙입니다.

기존 답변을 사용하여 둘 이상의 번역을 수행하는 방법을 설명하는 것 외에도 4x4 매트릭스를 직접 구성할 수 있습니다.

구글링을 하다가 발견한 임의의 사이트에서 회전 행렬을 보여주는 다음 이미지를 가져왔습니다.

의 회전:x축 위 회전주:
으로 회전 y축 주 회 전 위 ::
으로 회전:z축 위 회 전 주

번역의 좋은 예를 찾을 수 없었기 때문에, 내가 제대로 기억하고/이해했다고 가정하면, 번역:

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

변환에 대한 위키백과 기사와 이를 잘 설명하는 실용적인 CSS3 튜토리얼에서 더 많은 것을 확인하십시오.임의 회전 행렬을 설명하는 또 다른 가이드는 행렬에 대한 에곤 라스의 노트입니다.

행렬 곱셈은 물론 이 4x4 행렬 사이에서 작동합니다. 따라서 회전을 수행한 다음 번역을 수행하기 위해 적절한 회전 행렬을 만들고 그것을 번역 행렬로 곱합니다.

이것은 여러분에게 그것을 올바르게 이해할 수 있는 조금 더 많은 자유를 줄 수 있고, 또한 여러분을 포함하여 누구도 그것이 5분 안에 무엇을 하고 있는지 이해하는 것을 거의 완전히 불가능하게 만들 것입니다.

하지만, 효과가 있습니다.

편집: 저는 이것의 가장 중요하고 실용적인 용도인 자바스크립트를 통해 복잡한 3D 변환을 점진적으로 만드는 것에 대해 언급하는 것을 놓쳤다는 것을 깨달았습니다. 여기서 좀 더 의미가 있을 것입니다.

추가 마크업 계층을 사용하여 여러 변환을 적용할 수도 있습니다. 예를 들어 다음과 같습니다.

<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를 사용하여 변환이 있는 요소를 애니메이션화할 때 매우 유용합니다.

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

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

나중에 다음과 같이 작성할 수 있습니다(현재 사용 가능, 아래 업데이트 참조).

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 사양에 정의되어 있지만 크롬 카나리아 이외의 현재 브라우저 지원에 대한 내용을 찾을 수 없습니다.언젠가 돌아와서 여기서 브라우저 지원을 업데이트할 수 있기를 바랍니다. ;)

이 문서에서 현재 브라우저에 대한 해결 방법과 관련하여 확인할 수 있는 정보를 찾았습니다.

업데이트: 기능이 파이어폭스 72에 착륙했습니다.

업데이트: 이제 크롬 104, 엣지 104, 사파리 14.1에서 사용할 수 있습니다. https://web.dev/css-개별-트랜스폼-properties/#:~:text=support%20 these%20 properties., 브라우저%20 지원, -%3A를 참조하십시오.

내가 배운 교훈.

사용 중인 경우style의 React css, 마지막에 세미콜론을 포함하지 마십시오. React에 의해 자동으로 내부적으로 포함되기 때문입니다.

다음과 같습니다.

style={                             
  transform: "rotate(90deg) scaleX(-1)",
}

그것은 오래된 질문이지만 최근에 나와 매우 관련이 있는 것으로 밝혀졌습니다.저는 '변환: 매트릭스(...)'가 사용하기에 더 편리하다는 것을 알았습니다.따라서 해당 문제에 대해 아래 예제는 x축의 오른쪽(편의상)에 ~15도 회전 및 20px 변환을 적용합니다.

.matrixTransform {
    transform-origin: top left;
    transform: matrix(0.965,0.258,-0.258,0.965,20,0);
    font-size: 30px;
}
.combinedTransform {
    transform-origin: top left;
    transform: rotate(15deg) translateX(20px);
    font-size: 30px;
}

<div class=matrixTransform>A</div>
<div class=combinedTransform>B</div>

내가 수집한 바에 따르면 이 특정 변환은 초기 4개의 매개 변수를 사용하여 변환을 나타냅니다. 예를 들어 스케일, 회전.그리고 열 순서대로 줄을 서 있는 것 같습니다.나머지 두 개는 각각 x축과 y축의 변환입니다.저는 울프램 알파 치트시트(계산기)가 매우 유용하다는 것을 알게 되었습니다.

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 변환 >>

한 줄 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>

언급URL : https://stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css