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]
상기 더보기 변환에 위키 백과 문서 뿐만 아니라 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를 사용하여 변환으로 요소를 애니메이션 할 때 실제로 유용 할 수 있습니다.
다음과 같이 둘 이상의 변환을 적용 할 수 있습니다.
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 사양 에 정의되어 있지만 크롬 카나리아 이외의 현재 브라우저 지원에 대해서는 아무것도 찾을 수 없습니다. 언젠가 다시 돌아와서 브라우저 지원을 업데이트하겠습니다.)
이 기사 에서 현재 브라우저의 해결 방법에 대해 확인할 수 있는 정보를 찾았습니다 .
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>다중 변환을 적용하는 간단한 방법은 다음과 같습니다.
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
}
그러나 사파리와 같은 일부 브라우저에서는 IE가 접두사없이 tranform 속성을 지원하지 않으므로 모든 브라우저에서 접두사를 추가해야한다는 것을 잊지 마십시오.
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
-webkit-transform : translate(-20px, 0px) rotate(15deg);
}
예를 들어
-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
변환 코드를 생성하기 위해 GUI를 사용하여 필요한 변환 매개 변수에 대한 CSS 코드를 생성합니다.)
참고 URL : https://stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css
'Programing' 카테고리의 다른 글
| Django의“슬러그”란 무엇입니까? (0) | 2020.02.11 |
|---|---|
| HTML5 모범 사례; (0) | 2020.02.11 |
| JavaScript의 그래프 시각화 라이브러리 (0) | 2020.02.11 |
| GitHub에서 단일 파일 다운로드 (0) | 2020.02.10 |
| 기본 파이썬 반복기 빌드 (0) | 2020.02.10 |