CSS - Transform

트랜스폼은 바꾸다는 뜻으로 도형 엘리먼트 같은것들을 회전 , 반전 같은 모양을 바꾸는걸 뜻합니다. transform은 여러가지 속성이 있지만 여기서 이걸 다기술하긴 힘들고 URL 링크로 대체합니다.

TransForm 은 엘리먼트가 block 이거나 inline-lock 일경우에만 동작합니다.

​

https://codepen.io/anon/pen/BMOQgd

Css3 Transform

CSS3 Transform models ...

codepen.io

​

▼ 트랜스폼 속성에 사용되는단위

l deg : 각도 (degree)

l turn : 바퀴 (1바퀴 2바퀴 3바퀴 1= 360도)

l rad : radians (모서리 둥글게하는)

l grad : gradians 등등

​

◎ transform 속성 (가운데에서 엘리먼트의 크기와 각도를 다양하게 바꿈)

div{ background-color: red; /* 배경 */ height: 200px; width: 200px; transform: scale(5 , 5) rotate(180deg); //가로를 5배크기 세로를 5배 크기 //이렇게 설정값을 2개 넣을수있음 }

◎transform-origin 속성 (바뀌는 크기를 가운데가아닌 곳에서 바꿈)

<style> div{ background-color: red; /* 배경 */ height: 200px; width: 200px; } div:hover{ transform: scale(5,5); transform-origin: left 50%; //가로 , 세로 (기준점) } </style>

​

---

syntax - mozilla

/* Keyword values */ transform: none; /* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: translate3d(12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: perspective(17px); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); /* Global values */ transform: inherit; transform: initial; transform: unset;

---

css로 표현한 3d

​https://codepen.io/thebabydino/pen/adYaQX

layered marble pyramid (pure CSS)

Live coded in about 1 hour and 125 lines of code on the 26th of January 2016. Uses `transform-style: preserve-3d` so it won't work in IE. Also uses `cl...

codepen.io