이 글은 OthloTech Advent Calendar 2016 19일째 글이다.
안녕하세요.OthloTech저는 디자이너로 참가했습니다.
이번에는 별로 주목받지 못하지만 재미있어 보이는 트랜스포머:matrix3d에 대해 말씀드리겠습니다.

matrix3d 정보

참고서에는 이렇게 기재되어 있다.
transform 속성의 matrix3d () 함수는 요소에 3D 변형을 적용하는 데 사용됩니다.행렬은 행렬이고 matrix3d() 함수는 행렬을 사용하여 3D 변형을 지정합니다.
변형된 컨텐트는 16개의 수치로 지정됩니다.데이텀 값은 matrix(1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1)이며 좌표는 변경되지 않습니다.
지정할 수치가 16개면 복잡할 수 있지만 아래와 같다×네 부분으로 나눠서 생각하면 이해하기 쉽죠.16개의 수치는 4x4의 행렬을 지정한 것이다.
(인용원: htmq.com
간단하게 말하면 행렬을 사용하면 3d 변형의 느낌을 낼 수 있다.
줄을 서는 게 좀 어렵다고...
실제로 css 이외에도 다양한 언어를 함수로 준비하고glMatrix, mjs 같은 전용 프로그램 라이브러리로 계산하는 경우가 많다.

서법

위에서 말한 바와 같이 16개의 수치는 4이다×4를 나타내는 행렬.
따라서 코드를 쓸 때 다음과 같은 방법이 좋다.

matrix3d(
    a, b, c, d, 
    e, f, g, h, 
    i, j, k, l, 
    m, n, o, p 
)

또한 행렬의 계산 방법사이트 축소판 그림http://scene-live.com/)은 매우 이해하기 쉬우니 보십시오.

사이트 사용 방법

솔직히 matrix3d를 사용하는 사이트는 많지 않다.
(찾아봤는데 잘 못 찾았어요.)
다음은 소수의 사용 예를 소개한다.

franklinta.com

이것은 실제 마릭스3d를 소개한 보도다.
그림의 화면과 일치하도록 div를 수정하고 위키백과에 글을 표시합니다.
이렇게 안의 요소도 모두 변형된 상태로 변해 방법을 강구하면 재미있는 전시 방식을 만들 수 있다!

HYPER MARKET

섭곡의 모바일 액세서리 가게'HYPER MARKET'의 홈페이지다.
기사가 적힌 종이를 오묘하게 유지한다(´63;)이 디자인은 그것을 굴려서 보도를 볼 수 있다.
그림자를 확실하게 움직이고 깊이를 재설정하는 등 여러 가지 방법이 있는 사이트다.

총결산

matrix3d는 매트릭스 지식이 필요하기 때문에 수학을 못하는 사람은 사용하지 않는 것을 권장합니다.
rotate와perrspective를 활용하여 동작을 만드는 것이 비교적 간단할 수 있습니다...?
실제matrix3d를 사용하여 css에 3d동작을 추가하고 싶을 때css3 Generater를 권장합니다.

약간의 감상

첫 기고라 어떻게 써야 할지 모르는 경우가 많다.
잘못된 정보와 쓰기 방법이 틀리면 메시지를 남겨 주세요.
(codepen 사용법 오류로 DEMO를 표시할 수 없으며 추후 추가됩니다.)