CSS3_3D

by Kim Ara

HTML

<div class="myClass"></div>

CSS

.myClass {width: 32px;height: 32px;margin:10%;background-color:#000;transition: transform 1s ease;}

.myClass:hover {    
  transform: translateX(60px); 
  transform: translateY(60px);
  transform: perspective(150px) translateZ(60px);
}

.myClass:hover {    
 transform: rotateX(45deg);
 transform: rotateY(45deg);
 transform: rotateZ(45deg);
}

.myClass:hover {    
  transform: scaleX(2);
  transform: scaleY(2);
  transform: perspective(300px) scaleZ(3) translateZ(60px);
}

JavaScript

/*

translateZ를 다시한번 살펴보세요. 
선언된 코드를 보면 transform: perspective(150px) translateZ(60px)으로 되어 있습니다. 
translateZ(60px) 이외에도 perspective(150px) 속성이 함께 선언되어 있습니다. 
만일 이 속성이 선언되지 않았다면, 객체는 아무런 변화가 일어나지 않습니다. 
translateZ(60px)이란, 객체가 관찰자(나)로부터 60px 거리에 떨어져 있다는 뜻인데, 
이 거리감을 표현하려면 나와 객체 사이의 거리를 나타내는 perspective 속성이 반드시 필요하기 때문입니다.


*/