https://poiemaweb.com/css3-transform
CSS3 Transform | PoiemaWeb
트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바
poiemaweb.com
트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다.
애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다.
트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다.
단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다.
애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다.
1. 2D 트랜스폼 (2D Transform)
2D 트랜스폼은 프로퍼티값으로 변환함수(transform function)를 사용한다. 변환함수는 다음과 같다.
1.1 transform
변환함수를 프로퍼티값으로 쉼표없이 나열한다. 나열순서에 따라 차례대로 효과가 적용된다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 95px;
height: 95px;
line-height: 95px;
color: white;
text-align: center;
border-radius: 6px;
}
.original {
margin: 30px;
border: 1px dashed #cecfd5;
background: #eaeaed;
float: left;
}
.child {
background: #2db34a;
cursor: pointer;
}
.translate {
transform: translate(10px, 50px);
}
.scale {
transform: scale(.75);
}
.skew {
transform: skew(5deg, -20deg);
}
.rotate {
transform: rotate(70deg);
}
.complex {
transform: scale(.5) rotate(20deg);
}
</style>
</head>
<body>
<div class="original box">
<div class="child box translate">translate</div>
</div>
<div class="original box">
<div class="child box scale">scale</div>
</div>
<div class="original box">
<div class="child box skew">skew</div>
</div>
<div class="original box">
<div class="child box rotate">rotate</div>
</div>
<div class="original box">
<div class="child box complex">complex</div>
</div>
</body>
</html>
1.2 transform-origin
요소의 기본기준점을 설정할 때 사용된다. 기본기준점은 요소의 정중앙이다(50%,50%).
이동은 기준점을 변경하여도 일정 거리만큼 이동하므로 의미가 없다.
설정값으로 %, px, top left, bottom right을 사용할 수 있다.
0, 0은 top left, 100% 100%는 bottom right과 같은 값이다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 150px;
line-height: 150px;
color: white;
text-align: center;
border-radius: 6px;
}
.original {
margin: 20px;
border: 1px dashed #cecfd5;
background: #eaeaed;
float: left;
}
.child {
background: #2db34a;
cursor: pointer;
}
.scale1{
transform-origin: 0 0;
transform: scale(.5);
}
.scale2{
transform-origin: 50% 50%;
transform: scale(.5);
}
</style>
</head>
<body>
<div class="original box">
<div class="child box scale1">scale1</div>
</div>
<div class="original box">
<div class="child box scale2">scale2</div>
</div>
</body>
</html>
transform-origin 을 활용하여 기준점을 바꿨을때 scale(.5) 에 대한 결과이다
2. 3D 트랜스폼 (3D Transform)
3D 트랜스폼은 프로퍼티값으로 변환함수(transform function)를 사용한다. 사용할 수 있는 변환함수는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 150px;
line-height: 150px;
color: white;
text-align: center;
border-radius: 6px;
}
.original {
margin: 20px;
border: 1px dashed #cecfd5;
background: #eaeaed;
float: left;
}
.child {
background: #2db34a;
cursor: pointer;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.rotX{
animation-name: rotX;
}
.rotY{
animation-name: rotY;
}
.rotZ{
animation-name: rotZ;
}
.rotXY{
animation-name: rotXY;
}
@keyframes rotX {
/* keyframe */
from {
transform: rotateX(0);
}
to {
transform: rotateX(360deg);
}
}
@keyframes rotY {
/* keyframe */
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
@keyframes rotZ {
/* keyframe */
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="original box">
<div class="child box rotX">rotX</div>
</div>
<div class="original box">
<div class="child box rotY">rotY</div>
</div>
<div class="original box">
<div class="child box rotZ">rotZ</div>
</div>
</body>
</html>
3d 큐브
rotate3d( x축, y축 , z축 ,각도)
http://www.devdic.com/css/reference/functions/function:1248/rotate3d()
rotate3d()::CSS 레퍼런스
Editing rotate3d( ) 3차원 공간에 회전축을 지정하여 회전처리한다. 매개 변수 rotate3d() 함수를 사용하기 위한 매개 변수의 유형을 나타낸다.CSS Transforms Module Level 2 , , , [ | ] 3개의 는 순서대로 x, y
www.devdic.com
3개의 <number>는 순서대로 x, y, z 방향의 회전축을 나타내는 벡터(vector)이다.
마지막 매개 변수는 회전 각도를 지정한다. 회전은 벡터의 끝에서 원점을 향해 시계 방향으로 진행된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cube-wrapper {
width: 100px;
height: 100px;
transform-style: preserve-3d;
/* transform: perspective(700px); */
position: relative;
left: 100px;
top: 100px;
transition: 0.3s;
}
.cube-wrapper:hover {
transform: rotate3d(100, 100, 100, 40deg);
/* transform: perspective(700px) rotate3d(100, 100, 0, 45deg); */
}
.cube-wrapper > div {
position: absolute;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-weight: bold;
font-size: 20px;
}
.cube-front {
background-color: #FF0000;
transform: translate3d(0, 0, 50px);
}
.cube-back {
background-color: #0000FF;
transform: rotateY(180deg) translate3d(0, 0, 50px);
}
.cube-top {
background-color: #FFFF00;
transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.cube-bottom {
background-color: #de0081;
transform: rotateX(-90deg) translate3d(0, 0, 50px);
}
.cube-left {
background-color: #00FF00;
transform: rotateY(-90deg) translate3d(0, 0, 50px);
}
.cube-right {
background-color: #f77c1c;
transform: rotateY(90deg) translate3d(0, 0, 50px);
}
</style>
</head>
<body>
<div class="cube-wrapper">
<div class="cube-front">Front</div>
<div class="cube-back">Back</div>
<div class="cube-top">Top</div>
<div class="cube-bottom">Bottom</div>
<div class="cube-left">Left</div>
<div class="cube-right">Right</div>
</div>
</body>
</html>
Front
Back
Top
Bottom
Left
Right
perspective 는 원근감이라고 하지만 체감이 잘안되어서 일단 주석처리했다.
