CSS에 여러 변환을 적용하는 방법은 무엇입니까?
답변:
다음과 같이 한 줄에 배치해야합니다.
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>transform: scale(1,1.5) rotate(90deg);회전은 스케일 전에 발생합니다.
도움이 될 가능성이 아니라 사실이기 때문에이 답변을 추가하고 있습니다.
체인을 연결하여 둘 이상의 번역을 만드는 방법을 설명하는 기존 답변을 사용하는 것 외에도 4x4 행렬을 직접 구성 할 수도 있습니다.
인터넷 검색 중에 찾은 임의의 사이트 에서 다음 이미지를 가져 와서 회전 행렬을 보여줍니다.
x 축 주위 회전 : 
y 축 
주위 회전 : 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 변형을 점진적으로 만드는 것입니다.
추가 마크 업 레이어를 사용하여 여러 변형을 적용 할 수도 있습니다. 예 :
<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
미래에는 다음과 같이 작성할 수 있습니다.
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 사양 에 정의되어 있지만 크롬 카나리아 이외의 현재 브라우저 지원에 대해서는 아무것도 찾을 수 없습니다. 언젠가 다시 돌아와서 브라우저 지원을 업데이트하겠습니다.)
이 기사 에서 현재 브라우저의 해결 방법에 대해 확인할 수 있는 정보를 찾았습니다 .
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 :-어떻게?
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>