TIL

엘레먼트 회전요소

• rotate

The amount of rotation created by rotate() is specified by an <angle>. If positive, the movement will be clockwise; if negative, it will be counter-clockwise. A rotation by 180° is called point reflection.

rotate(a)

• rotateX -> 화면 방향으로 회전 회전축이 화면의 x축

The rotateX() CSS function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. Its result is a <transform-function> data type.

• rotate origin 회전축의 좌표 정의

The transformation origin is the point around which a transformation is applied. For example, the transformation origin of the rotate() function is the center of rotation.

This property is applied by first translating the element by the value of the property, then applying the element's transform, then translating by the negated property value.
This means, this definition

transform-origin: -100% 50%;
transform: rotate(45deg);

results in the same transformation as

transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

By default, the origin of a transform is center.

setTimeout

The setTimeout() method of the WindowOrWorkerGlobalScope mixin (and successor to Window.setTimeout()) sets a timer which executes a function or specified piece of code once the timer expires.
타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정합니다.

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

---

오늘은...

주말의 두번째날 오늘은 어제 진행하다 마친 windy 프로젝트의 메인화면중 각 윈도우를 구성하는 창을 나타내는 방법을 생각하여 작성하였다. 방법은 간단하다 초기상태는 다혀진 상태로 등장한다 가장 윗열에 잠겨진 채로 말이다. 유저 인포메이션 창을 중에 두었는데 이는 게스트 상태로 들어올 경우 잠가둘 생각이다. 여튼 이렇게 구성된 창들은 잠겨친 창을 클릭 하면 창이 천천히 하강하고 잠겨진 버튼은 수직으로 접혀서 안보이게 되면서 바닥에 닿게 되고 내부 구성은 안보였다가 서서히 나타나는방식으로 보여지게 되는 식이다. 이를 위해 해당동작에 관한 명령을 찾아야 했고 원하는 방식으로 구현되는지 확인하기위해 생각보다 긴시간을 소모하게 되었다. 어지되었건 현재는 멘인 코드에 적용을 한상태이다.

오늘의 작업 결과