실무에서 필요한 내용 위주의 개발자를 위한 html/css/js 시리즈입니다.
사내 강좌로 진행 했던 내용을 편집하여 연재할 예정입니다.
CSS Transform 은 부모 element의 영향을 받지 않고, 독자적으로 element 의 위치 및 확대/축소 회전이 가능한 CSS 요소입니다.
Transform 3D의 요소로 지정되면 브라우져에서 GPU를 사용하며,
CSS 애니메이션 효과인 transition 과 animation 을 사용할때 성능과 자연스러움을 기대 할 수 있습니다.
<style type="text/css">
.sample-area .sample .button:hover {
transform: translate(0,2px);
box-shadow: none;
}
.sample-area .sample .btn_close:hover {
transform: rotate(135deg);
}
.sample-area .sample .image:hover > img {
transform: scale(1.4);
}
</style>
html 샘플 확인 : https://natsgun.tistory.com/14 [개발자C군의 개발노트]
<style type="text/css">
.sample-area .sample .zsample.translateX:hover .zsample-child {
transform: translateX(40px); /* X축 이동 */
}
.sample-area .sample .zsample.translateY:hover .zsample-child {
transform: translateY(40px); /* Y축 이동 */
}
.sample-area .sample .zsample.translateZ:hover .zsample-child {
transform: translateZ(40px); /* Z축 이동 */
}
.sample-area .sample .zsample.rotateX:hover .zsample-child {
transform: rotateX(100deg); /* X축 회전 */
}
.sample-area .sample .zsample.rotateY:hover .zsample-child {
transform: rotateY(100deg); /* Y축 회전 */
}
.sample-area .sample .zsample.rotateZ:hover .zsample-child {
transform: rotateZ(100deg); /* Z축 회전 */
}
.sample-area .sample .zsample.rotateZ:hover .zsample-child {
transform: rotate3d(1,1,1,100deg); /* X,Y,Z축 회전 */
}
.sample-area .sample .zsample.scaleZ:hover {
transform: rotate3d(0,1,0,45deg) scaleZ(1.5);
}
</style>
html 샘플 확인 : https://natsgun.tistory.com/14 [개발자C군의 개발노트]
일반 적인 태그는 % 사용시 부모 사이즈 기준으로 적용되나,
Transform의 translate / translate3D 에서 top, left % 는 자신의 element 사이즈 기준으로 적용됨
<style type="text/css">
.modal{
margin-top:50%; /* 부모 element 기준으로 높이 50% 만큼 내린 후 */
transform:translateY(-50%); /* 현재 element 크기의 50% 만큼 위로 올림 */
}
</style>
모바일 웹 페이지를 작업하다보면 iOS 기기의 웹서핑을 할때 스크롤을 하게되면 안드로이드의 스크롤과는 다른 특징을 보이는데, iOS만의 특유의 스크롤효과 때문이다. 부드러움, 가속(관성) ,바운스 효과가 여타 OS 와는 다른 특징을 보이는데, 이 효과를 선호하는 경우 일부로 구현하기 위해서 별도의 작업까지 진행하는 경우가 있다. 하지만, 용도에 따라서 ...
물론 어느정도 주관이고 실력이란 것이 상대 평가이며 주변 환경에 따라 평가 기준이란 것이 달라질 수 있다 하지만 자가진단하는 방법이 있다 평소에 인지를 못하고 있거나 혹은 인정을 하지않고 있을뿐 사실 본인의 실력은 본인이 높은 확률로 알고있다 주 클래스가 개발자다 보니 개발 위주의 예시이지만 각자 자기 분야의 상황을 대입해 본다면 대부분 통용...
페이스북 UX/GUI 그룹에 마침 Transform3D 와 Transition을 활용해서 만들 수 있는 인터렉션 디자인 컨셉 질문이 들어와 답변과 함께 구현하였습니다. 원본 이미지는 dribbble.com 에 SANG NGUYEON 이라는 분의 컨셉 인터렉션 디자인 아트입니다. 원본 컨셉 아트는 동영상인 관계로 URL을 링크 합니다. https://...
1) Transition 속성값의 변화 중간과정을 CSS가 만들어 부드러운 움직임을 나타내는 기능(IE 10+) 속성값이 변화하는 경우에만 동작하므로 html 샘플 확인 : https://natsgun.tistory.com/15 [개발자C군의 개발노트] 2-2) 자바스크립트 이용하지 않고 변화를 주는 방법 2-2-1) 크롬 개발자...
실무에서 필요한 내용 위주의 '개발자를 위한 html/css/js' 시리즈입니다. 사내 강좌로 진행 했던 내용을 편집하여 연재할 예정입니다. CSS Transform 은 부모 element의 영향을 받지 않고, 독자적으로 element 의 위치 및 확대/축소 회전이 가능한 CSS 요소입니다. Transform 3D의 요소로 지정되면 브라우져에서 GPU를 ...
벨로그에서는 html 구현이 안되어서 샘플 코드가 있는 티스토리로 링크를 연결해 놓았습니다