transform2 20230712 3dTransform.html 3D Transform을 배워보는 시간이다 물체와 나의 거리를 perspective라고 한다. 극단 적인 예.. perspective-orgin이란 예를 들어 뚜껑이 없는 상자의 바닥을 내려 보았을 때의 시점이라 생각하면 쉽다. 10% 90%가 적용된 모습이다. transform-origin은 x축 y축 z축이 만나는 지점을 의미한다. 3d transform 테스트 3D Transform을 통해서 정육면체 만들어보기 3d cube 테스트 1 2 3 4 5 6 3d cube 테스트 1 2 3 4 5 6 위에 정육각형을 만든 코드인데 나름 주의할 점은 .cube > div:nth-child(n){ transform: rotaeX(ndeg) translateZ(n px); } 코드 쪽에서 순서가 바뀌면 안된다.. 2023. 7. 12. 20230707 CSS3 비쥬얼 스튜디오 코드에서 CSS3를 새롭게 배우는 날이다. css가 변경되는 중간 과정을 보여주고 싶을 때 transition을 사용하면 된다 transition 테스트 transition timing function 테스트 start 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 위의 예제를 살펴보자. hover 상태가 변화할 때, div box의 margin값이 변화한다. Transform👉 Transform의 기능으로는 평행이동, 확대, 축소, 회전, 비틀기 등의 기능을 가지고 있다. 트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀.. 2023. 7. 7. 이전 1 다음
