코드 그라데이션

14. 변형 본문

Front/Mega-CSS

14. 변형

완벽한 장면 2023. 6. 3. 13:28

transform과 변형 함수

 

2차원 변형과 3차원 변형

  • 2차원 변형은 웹 요소를 평면에서 변형한다.
  • x축은 오른쪽으로 갈수록 값이 커지고, y축은 아래로 내려갈수록 값이 커진다.
  • 3차원 변형은 x축, y축에 원근감 주는 z축을 추가해서 변형한다.
  • 3차원 변형에서 z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고, 뒤로 갈수록 값이 작아진다.

2차원 변형과 3차원 변형

 

 

2차원 변형 함수

 

3차원 변형 함수

 

 

translate() 함수 : 웹 요소를 이동시킨다.

  • translate( ) 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동

 

 

예제

 

실행 결과

마우스 올려놓을 시 모양 변화됨

 

 

scale() 함수 : 요소를 확대/축소

  • 괄호 안의 값 (sx, sy, sz)이 1보다 확대되고 1보다 작으면 축소된다.

 

예제

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>Transform:scale</title>
    <style>
			#container{
				width: 600px;
				margin: 20px auto;
			}
			.origin {
				width: 100px;
				height: 100px;
				border: 1px solid black;
				float: left;
				margin: 40px;
			}
			.origin > div {				
				width: 100px;
				height: 100px;
				background-color: orange;
			}
      #scalex:hover{
        transform: scaleX(2);  /* x축으로(가로) 2배 확대 */ 
      }
      #scaley:hover{
        transform: scaleY(1.5);  /* y축으로(세로) 2배 확대 */ 
      } 
      #scale:hover{
        transform: scale(0.7);  /* x, y축으로(가로, 세로) 0.7배 확대 */ 
      }
		</style>
	</head>
	<body>
		<div id="container">		
			<div class="origin">
				<div id="scalex"></div>
			</div>
			<div class="origin">
				<div id="scaley"></div>
			</div>
			<div class="origin">
				<div id="scale"></div>
			</div>
		</div>		
	</body>
</html>

 

실행 결과

 

 

 

2차원 rotate() 함수

  • rotate( ) 함수를 2차원에서 사용할 때는 각도만 지정하면 된다.
  • 함수는 웹 요소를 지정한 각도만큼 오른쪽(시계 방향)이 나 왼쪽(시계 반대 방향)으로 회전시킨다.

기본형

transform: rotate(각도)

 

  • rotate( ) 함수에서 지정할수 있는 각도의 값은 일반적인 각도나 래디안을 사용하는데 , 이 때 1 래디안은 <180/파이>.를 의미한다.
  • 회전 각도가 양수일 경우 오른쪽으로 회전하고, 음수일 경우 왼쪽으로 회전.

 

예제

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>rotateTest</title>
  <style>
		#container{
			width:1800px;
			margin:20px auto;
		}
		.origin {
			width:200px;
			height: 100px;
			float: left;
			margin: 300px;
		}

    #rotate1:hover {
      transform: rotate(50deg);  /* 시계 방향(오른쪽)으로 50도 회전 */
    }
    #rotate2:hover {
      transform: rotate(-50deg);  /* 시계 반대 방향(왼쪽)으로 50도 회전 */
    }
  </style>
</head>
<body>		
	<div id="container"> 
		<div class="origin" id="rotate1">
			<img src="images/LCD.png">	
		</div>
		<div class="origin" id="rotate2">
			<img src="images/LCD.png">							
	</div>
</body>
</html>

 

실행 결과

 

 

3차원 rotate() 함수

  • x축이나 y축, z축을 기준으로 회전시킨다.
  • perspective 속성을 함께 사용해서 원근감을 추가해 주면 회전 형태를 입체적으로 표현할 수 있다.
  • perspective 속성은 3차원 변형에서 사용하는데, 원래 있던 위치에서 사용자가 있는 방향이나 혹은 반대 방향으로 잡아당기거나 밀어내어 원근감을 표현한다.
  • perspective 속성 사용값은 0보다 커야 하며, 원래 있던 위치에서 사용자가 있는 쪽으로 얼마나 이동하는지를 픽셀 크기로 나타낸다.
  • 값이 클수록 사용자로부터 멀어진다.

 

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Roatate3D Test</title>
  <style>
    #container{
      width:800px;
      margin:20px auto;
    }
    .origin {
      width: 100px;
      height: 100px;
      margin: 40px;
      float: left;
      border: 1px solid black;
      perspective: 200px;  /* 원근감 추가 */ 
    }
    .origin > div {				
      width:100px;
      height:100px;
      background-color:pink;
      transition:all 2s;  /* 2초 동안 회전하도록 트랜지션 적용 */
    }
    #rotatex:hover {
      transform: rotateX(55deg);  /* x축으로 55도 회전 */
    }
    #rotatey:hover {
      transform: rotateY(55deg);  /* y축으로 55도 회전 */
    }
    #rotatez:hover {
      transform: rotateZ(55deg);   /* z축으로 55도 회전 */
    }
    #rotatexyz:hover {
      transform: rotate3d(2.5, 1.2, -1.5, 55deg);  /* x,y,z축으로 55도 회전 */
    }
    #skewx:hover{
        transform: skewX(40deg);
    }
    #skewy:hover{
        transform: skewY(15deg);
    }
    #skewxy:hover{
        transform: skew(-35deg, -15deg); /*x축으로 -35도 y축으로 -15도 비틀기*/
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="origin">
      <div id="rotatex"></div>
    </div>
    <div class="origin">
      <div id="rotatey"></div>
    </div>
    <div class="origin">		
      <div id="rotatez"></div>
    </div>
    <div class="origin">	
      <div id="rotatexyz"></div>	
    </div>
    <div class="origin">	
        <div id="skewx"></div>	
      </div>
      <div class="origin">	
        <div id="skewy"></div>	
      </div>
      <div class="origin">	
        <div id="skewxy"></div>	
      </div>
  </div>
</body>
</html>

 

실행 결과

 

 

예제 2

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>PerspectiveTest</title>
    <style>
      .origin{
		width:200px;
		height:180px;
		border:1px solid black;
		margin:550px;
		float:left;  
      }
      .origin > div {
        width:152px;
        height:180px;
      }
      .rotatex:hover {
        transform: rotateX(60deg);  /* x축으로 60도 회전 */ 
      }
      #pers {
        perspective:750px;  /* 원근감 추가 */    
      }
		</style>
	</head>
	<body>		
		<h4>원본 이미지</h4>
		<div class="origin">
			<img src="images/pandas.jpg" alt="">
		</div>
		<div class="origin">
			<div class="rotatex">
				<img src="images/pandas.jpg" alt="">
			</div>
		</div>
		<div class="origin" id="pers">
			<div class="rotatex">
				<img src="images/pandas.jpg" alt="">
			</div>
		</div>
	</body>
</html>

 

실행 결과

 

요소를 비틀어 왜곡하는 skew() 함수

  • 지정한 각도만큼 요소를 비틀어 왜곡한다.
  • 양쪽 방향으로 비틀거나 한쪽 방향으로만 비틀 수도 있다.

 

예제

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>Transform</title>
    <style>
			#container{
				width:600px;
				margin:20px auto;
			}
			.origin {
				width: 100px;
				height: 100px;
				border: 1px solid black;
				float: left;
				margin: 40px;
			}
			.origin > div {				
				width:100px;
				height:100px;
				background-color:orange;
			}
      #skewx:hover {
        transform: skewX(30deg);  /* x축 기준으로 30도 비틀기 */
      }
      #skewy:hover {
        transform: skewY(15deg);  /* y축 기준으로 15도 비틀기 */
      }
      #skewxy:hover {
        transform: skew(-25deg, -15deg);  /* x축 기준으로 -25도, y축 기준으로 -15도 비틀기 */
      }
		</style>
	</head>
	<body>		
		<div id="container">		
			<div class="origin">
				<div id="skewx"></div>
			</div>
			<div class="origin">
				<div id="skewy"></div>
			</div>
			<div class="origin">
				<div id="skewxy"></div>
			</div>
		</div>

		
	</body>
</html>

 

실행 결과

  • skewX() 함수는 각도값이 양수면 왼쪽이 올라가고 오른쪽이 내려가는 형태
  • skewY() 함수는 각도값이 양수면 오른쪽이 올라가고 왼쪽이 내려가는 형태

 

 

 

 

 

 

 

 

 

 

 

 

728x90

'Front > Mega-CSS' 카테고리의 다른 글

16. 에니메이션  (0) 2023.06.04
15. 트랜지션  (6) 2023.06.03
13. 가상 클래스와 가상 요소  (0) 2023.05.17
12. 속성 선택자  (0) 2023.05.16
11. 연결 선택자  (0) 2023.05.15
'Front/Mega-CSS' Related Articles more
Comments