CSS에서 여러 변환 적용
-
CSS에서 여러
transform값을 지정하여 여러 변환 적용 -
CSS에서 여러
transform을 지정하여 여러 변환 적용 -
CSS에서 여러
transform-origin을 지정하여 여러 변환 적용 - CSS에서 중첩 클래스를 사용하여 여러 변환 적용
- 결론
CSS 변환은 요소에 애니메이션 효과를 추가하는 강력하지만 잘 사용되지 않는 방법입니다. 그러나 한 번에 여러 변환을 적용하면 원하는 결과를 얻기가 까다로울 수 있습니다. 예를 들어 요소가 겹칠 때 요소가 동기화되어 변환되기를 원합니다.
이 기사에서는 CSS에서 여러 변환을 적용하는 방법을 살펴봅니다.
CSS에서 여러 transform 값을 지정하여 여러 변환 적용
여러 CSS 변환을 사용하는 방법에는 여러 가지가 있습니다. 다음 섹션에서 이에 대해 논의할 것입니다.
여러 CSS 변환을 적용하는 한 가지 방법은 속기 변환 속성을 사용하는 것입니다. 이 속성은 공백으로 구분된 여러 값을 가질 수 있습니다.
예를 들어:
transform: rotate(45deg) scale(2);
이 선은 요소를 45도 회전한 다음 크기를 두 배로 늘립니다.
또 다른 예는 요소를 30도 회전한 다음 50px로 변환하려는 경우 다음 코드를 사용하는 것입니다.
transform: rotate(30deg) translate(50px);
이 선은 복잡한 애니메이션과 상호 작용을 만드는 데 유용한 기술이 될 수 있습니다.
이제 여러 변환의 몇 가지 예를 살펴보겠습니다. 이미지 변환에 다음 코드를 사용할 수 있습니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin: 10px;
}
.box {
background: url("/img/DelftStack/logo.png")
no-repeat;
background-size: cover;
height: 100px;
width: 600px;
border: 2px solid #000000;
transform: rotate(110deg) translate(45px, -160px);
}
h1 {
color: #000000;
}
</style>
</head>
<body>
<h1>
CSS Multiple transforms
</h1>
<strong>
How to apply multiple transforms in CSS?
</strong>
<div class="box"></div>
</body>
</html>
위의 코드에서는 이미지 변환을 위해 CSS 함수 transform: rotate(110deg) translate(45px, -160px)를 사용했습니다. 이 CSS 코드는 이미지를 최대 110도까지 회전시킵니다.
따라서 위의 코드를 사용하여 모든 이미지를 변환하는 데 적용할 수 있습니다.
CSS에서 여러 transform을 지정하여 여러 변환 적용
여러 변환을 사용하는 또 다른 방법은 각 변환을 개별적으로 지정하는 것입니다.
예를 들어:
transform: rotate(45deg);
transform: scale(2);
CSS에서 여러 transform-origin을 지정하여 여러 변환 적용
transform-origin 속성을 활용하여 변환의 원점을 변경할 수도 있습니다. 예를 들어:
transform-origin: 50% 50%;
transform-origin: bottom right;
이것은 원점을 요소의 중심 또는 구성 요소의 오른쪽 하단 모서리로 변경합니다.
CSS에서 중첩 클래스를 사용하여 여러 변환 적용
CSS 변환을 적용하는 또 다른 방법이 있습니다. 다음은 CSS 코드이지만 여러 개의 CSS transforms을 적용하기 위해 outer-transform과 inner-transform이라는 두 개의 중첩 클래스를 만들 것입니다.
이 코드는 원하는 출력도 제공합니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #000000;
}
.outer-transform {
transform: translate(150px, 180px);
}
.inner-transform {
background: url("/img/DelftStack/logo.png")
no-repeat;
background-size: cover;
height: 100px;
width: 600px;
border: 2px solid #000000;
transform: rotate(-150deg);
}
</style>
</head>
<body>
<h1>
CSS multiple transforms
</h1>
<strong>
How to apply multiple transforms in CSS?
</strong>
<div class="outer-transform">
<div class="inner-transform"></div>
</div>
</body>
</html>
출력:
결론
CSS의 요소에 여러 변환을 적용할 수 있음을 알려드리게 되어 기쁩니다. 동시에 회전되고 변환되는 div를 가질 수 있으며 요소가 다른 방향으로 회전되고 변환될 수도 있습니다.
변환은 HTML 요소에 시각적 효과를 만드는 강력한 도구입니다. CSS는 다양한 변환을 지원하여 더 넓은 범위의 효과를 허용합니다.
변환을 함께 사용하면 진정으로 놀라운 비주얼을 만들 수 있습니다.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn