HTML web2 16일차

HTML web2 16일차 - transform

Front-end/HTML

by 본투비곰손 2023. 6. 5. 23:25

728x90

transform

1. transform:rotate (deg 값)

입력한 각도 값 만큼 회전 시켜주는 css속성

<style>
		#a{width:500px;height:500px;background-color:red;
            transform: rotate(45deg);margin: 150px 150px;}
    </style>
</head>
	<body>
		<div id="a"></div>
	</body>

시계방향으로 45º 회전한다.

2. transform:scale(가로배수값,세로배수값)

입력한 배수값만큼 대상태그의 크기를 조절하는 css속성

	<style>
        #a,#b,#c{width:100px;height:100px;margin: 100px 100px;
            float: left;}
		#a{background-color:red;}
        #b{background-color:blue;transition: 1s;}
        #c{background-color:green;transition: 1s;}
        
        #b:hover{width:200px;height: 200px;}
        #c:hover{transform: scale(2,2);}
        
    </style>
</head>
	<body>
		<div id="a"></div>
		<div id="b"></div>
		<div id="c"></div>
	</body>

width,height 값으로 크기를 조절하면 한방향으로 길이가 늘어 나지만 scale를 사용하면 양방향으로 크기가 늘어난다.

또한 width,height값으로 크기를 조절할 경우 다른 태그가 밀리거나 당겨지는데 scale를 사용하면 태그를 무시하고 늘어나거나 줄어든다.

기존의 크기보다 작게 조절하고 싶다면 배수의 값이기 때문에 -값이아닌 소수점 단위를 사용하면 된다.

	<style>
        #a,#c{width:100px;height:100px;margin: 100px 100px;
            float: left;}
		#a{background-color:red;}
        #c{background-color:green;transition: 1s;}
        
        #c:hover{transform: scale(0.5,0.5);}
        
    </style>
</head>
	<body>
		<div id="a"></div>
		<div id="c"></div>
	</body>

3. transform:skew(x축deg값,y축deg값)

transform:skewX(deg값),transform:skewY(deg값) 으로도 사용 할 수 있다.

	<style>
        #a,#b,#c{width:100px;height:100px;margin: 100px 100px;
            float: left;}
		#a{background-color:red;transition: 1s;}
        #b{background-color:blue;transition: 1s;}
        #c{background-color:green;transition: 1s;}
        
        #a:hover{transform: skew(20deg,20deg);}
        #b:hover{transform: skewX(25deg);}
        #c:hover{transform: skewY(25deg);}
        
    </style>
</head>
	<body>
		<div id="a"></div>
        <div id="b"></div>
		<div id="c"></div>
	</body>

보통 hover구문과 사용하지 않으며 기울어진 상태로 만들어둔다.

4.transform:translate(가로px값,세로px값)

transform:translateX(px값): 입력한만큼 오른쪽으로 이동

transform:translateY(px값): 입력한만큼 아래쪽으로 이동

	<style>
        #a,#b,#c{width:100px;height:100px;margin: 100px 100px;
            float: left;}
		#a{background-color:red;transition: 1s;}
        #b{background-color:blue;transition: 1s;}
        #c{background-color:green;transition: 1s;}
        
        #a:hover{transform: translate(50px,50px);}
        #b:hover{transform: translateX(50px);}
        #c:hover{transform: translateY(50px);}
        
    </style>
</head>
	<body>
		<div id="a"></div>
        <div id="b"></div>
		<div id="c"></div>
	</body>

hover를 사용했을때 margin과의 차이점

margin은 마우스 커서가 대상태그 밖으로 나가면 다시 원래 자리로 돌아오지만 translate의 경우 마우스 커서가 밖으로 나가도 끝까지 움직인다.

5. transform-origin

선택한 태그의 중심축을 이동하여주는 css속성

<style>
		*{margin:0;padding:0;}
		
		#a{width:400px;height:400px;
				border:3px solid black;
				margin:300px;position:relative}
		
		#b{background-color:blue;
			width:400px;height:400px;position:absolute;
				transition:2s;transform-origin:100% 100%}
		#c{background-color:red;
			width:300px;height:300px; 
			position:absolute;left:50px; top:50px;
			transition:2s;transition-delay:3s;}
		#a:hover #b{transform:rotate(90deg)}
		#a:hover #c{transform:rotate(90deg)}
	</style>
</head>
<body>
	<div id="a">
		<div id="b"></div>
		<div id="c"></div>
	</div>
</body>

div="b"의 회전 중심축이 transform-origin:100% 100%만큼 이동하여 90도 회전한다.

728x90

'Front-end > HTML' 카테고리의 다른 글

HTML web2 18일차 - table태그 (0)	2023.06.07
HTML web2 17일차 - 스프라이트이미지 (0)	2023.06.06
HTML web2 15일차 - z-index (0)	2023.06.04
HTML web2 13일,14일차 - position (0)	2023.06.03
HTML web2 10일차 - 구글 개발자 도구, 지도사용법, 폰트사용법 (0)	2023.06.01