참조 : https://3dtransforms.desandro.com/carousel

참고 : https://3dtransforms.desandro.com/cube

https://www.youtube.com/watch?v=1DHBVFx6aeY

https://www.youtube.com/watch?v=DLTY01YVb2M

https://www.youtube.com/watch?v=kBUvJoU1lDo

참고 : http://www.beautifulcss.com/archives/2724

# 기본 구성.@keyframes

@keyframes myAnimation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

div { animation: myAnimation 5s infinite; }

@keyframes myAnimation {
  0%    { font-size: 10px; }
  25%   { font-size: 20px; }
  50%   { font-size: 30px; }
  70%   { font-size: 20px; }
  100%  { font-size: 10px; }
}

@keyframes myAnimation {
  from { font-size: 10px; }
  to   { font-size: 20px; }
}

# 기본 구성.animation

.div1 {
   animation-name: myAnimation;
   animation-duration: 4s;
   animation-iteration-count: 10;
   animation-direction: alternate;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   animation-delay: 2s;
}

fill-mode 예제

@keyframes myAnimation {
  0%    { left: 0px }  /* @keyframes Rule에서 선언한 위치 */
  100%  { left: 100px }
}
 
div { 
	left: 20px;        /* selector에서 선언한 위치 */
	animation-name: myAnimation;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

# 단축형 작성법

순서)
animation : name duration delay iteration-count direction fill-mode
Ex)
animation: myAnimation 1s 2s 3 alternate backwards

# 복수 선언

.div1 {
   animation: 
      myAnimation_01 2s infinite, 
      myAnimation_02 1s;
}

# Step()

@keyframes myAnimation {
  0% { left: 0; }
  100%   { left: 100px; }
}
 
.div1 {
  animation: myAnimation 10s steps(10) infinite;
}

Ex>

http://jsfiddle.net/simurai/CGmCe/light/

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
    
    -webkit-animation: play 1.8s steps(10) infinite;
       -moz-animation: play 1.8s steps(10) infinite;
        -ms-animation: play 1.8s steps(10) infinite;
         -o-animation: play 1.8s steps(10) infinite;
            animation: play 1.8s steps(10) infinite;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

<img src="http://s.cdpn.io/79/sprite-steps.png" />
<div class="hi"></div>

참조 : http://www.beautifulcss.com/archives/2270

메소드설명

# translateZ 의 이해.

기본 좌표계의 카메라를 기준으로, 사용자와 가까워지느냐(=사물이 커진다) 멀어지느냐로 이해하면 편하다.

다만 카메라를 바꾸면 달라질 수 있다.

[ 중요 ] Perspective (심도, 원근)

- 3D 에서 가장 중요한 요소 : transform, perspective

- translateZ 는 perspective 값 범위 이내에서 조절되도록 하자.

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

# Pespective 값 차이에 따른 심도 변화

참조 : https://3dtransforms.desandro.com/perspective

# Perspective-orgin

부모 객체 하나에만 선언한다.

.camera {
    perspective: 70px;
    perspective-orgin: 50% 50%
}

# transform-style : flat

flat - (default) 자식객체한테 3D 명령들이 동작하지 않음.

       Ex> 아래 코드 마지막 rotateX(-30deg); 가 동작하지 않는다.

.parent {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    border: 1px solid #ddd;
    transform: rotateX(45deg);
    transform-style: flat
}

.child {
    margin-top: 40px;
    padding: 100px 0;
    width: 100%;
    background-color: #ddd;
    text-align: center;
    color: #999;
    transform: rotateX(-30deg);
}

<div class="container">
    <div class="parent">
        <div class="child">
            I'm your sun.
        </div>
    </div>
</div>

# transform-style : preserve-3d : 3D

.parent {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    border: 1px solid #ddd;
    transform: rotateX(45deg);
	transform-style: preserve-3d;
}

.child {
    margin-top: 40px;
    padding: 100px 0;
    width: 100%;
    background-color: #ddd;
    text-align: center;
    color: #999;
    transform: rotateX(-30deg);
}

<div class="container">
    <div class="parent">
        <div class="child">
            I'm your sun.
        </div>
    </div>
</div>

# backface-visibility: hidden

- 중요

- backface-visibility: visible 시에는, rotateX(180deg) 시 "앞면을 뒤에서 보는 것"처럼 된다. (뒷면이란 건 없다)

- backface-visibility: hidden 시에는, rotateX(180deg) 시 객체가 없는 것처럼 투명하게 된다.

참조 : http://www.beautifulcss.com/archives/2026

# Transition

- 제한적 애니메이션.

- 기존의 객체 속성이 변할때, 천천히 변하게 한다.

- 모양 왜곡 없음. 동작반복 없음.

.ex-01 {
    display: inline-block;
    margin: 0;
    padding: 20px;
    text-decoration: none;
    font-size: 12px;
    color: white;
    background-color: black;
    transition: all 1s;
}
 
.ex-01:hover {
    padding: 30px;
    color: yellow;    
    background-color: red;
}

div { transition: property duration timing-function delay; }

# 각각의 속성이 따로 transition 을 가질 경우

아래와 같이, 속성별로 따로 줄 수 있다.

div {
    transition: background 2s ease 1s,
                padding 1s linear 2s;
}

# 여러 속성이 동일 transition 을 가질 경우

div {
    transition-property: width, color;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 3s;
}

transition 속성 설명속성값

# 여러 속성이 일부 transition 만 가질 경우

- 아래 코드에서 "각 속성의 항목이 모두 4개" 이며, 순서가 같은 항목끼리 동작한다.

div {
    transition-property: width, height, border-width, color;
    transition-duration: 1s, 2s, 1s, 3s;
    transition-timing-function: ease ease-in ease-out linear;
    transition-delay: 3s, 1s, 1s, 2s;
}

# 타이밍

transition-timing-function 속성 설명속성값

# Example

.ex-02 {
    display: inline-block;
    margin: 0;
    width: 80px;
    height: 80px;
    line-height:80px;
    text-decoration: none;
    font-size: 12px;
    color: #999;
    background-color: #f4f4f4;
    border-width: 1px;
    border-style: solid;
    border-radius: 10%;
    border-color:#999;
    transition: width .2s ease,
				height .2s ease,
				line-height .2s ease,
				color .2s ease,
				font-size .2s ease,
				border .2s ease,
				background-color .2s ease,
				border-radius .2s ease .4s;
}
 
.ex-02:hover {
    width: 120px;
    height: 120px;
    line-height:120px;
    color: #ffcccc;
    font-size: 20px;
    border-width: 5px;
    border-color:#ff5e5d;
    background-color: #fa8382;
    border-radius: 50%;
}

참조 : http://www.beautifulcss.com/archives/2136

# Transform ( rotate / skew )

.myclass { transform: rotate(45deg) skew(10deg,0deg); }

.ex-03 {
	display:inline-block;
	width: 120px;
	height: 120px;
    margin: 0 30px 20px 30px;
	background-color: #ff655e;
	color:#fff;
	font-size:10px;
	line-height: 120px;
}
 
.ex-03.rotate { transform: rotate(45deg); }
 
.ex-03.skew { transform: skew(20deg,10deg); }

2D Transform 메소드 정리함수설명

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>

<style>
.ex-04
{
	position: relative;
	width: 128px;
	height: 128px;
	margin: 0 auto;
	border-radius: 1px;
	background-color: #e5eeee;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
}

.myClass
{
	width: 128px;
	height: 128px;
	background-color:#ffffff;
	border: 1px solid #000000;
	transition: transform 1s ease;
}
</style>

<style>
.myClass1:hover
{
  transform: translateX(60px);
}
.myClass2:hover
{
  transform: translateY(60px);
}
.myClass3:hover
{
  transform: translate(60px, 60px);
}
.myClass4:hover
{
  transform: scaleX(2);
}
.myClass5:hover
{
  transform: scaleY(2);
}
.myClass6:hover
{
  transform: scale(2, 2);
}
</style>
</head>



<body>
<div class="ex-04">
	<div class="myClass myClass1">transform: translateX(60px)</div>
</div>

<div class="ex-04">
	<div class="myClass myClass2">transform: translateX(60px)</div>
</div>

<div class="ex-04">
	<div class="myClass myClass3">transform: translateX(60px)</div>
</div>

<div class="ex-04">
	<div class="myClass myClass4">transform: translateX(60px)</div>
</div>

<div class="ex-04">
	<div class="myClass myClass5">transform: translateX(60px)</div>
</div>

<div class="ex-04">
	<div class="myClass myClass6">transform: translateX(60px)</div>
</div>

</body>
</html>
				

# 좌표계

기준점

- 움직임이 발생시 움직이지 않는 고정점

- 기준점에 따라 객체가 움직인다.

- Syntax

transform-origin: 50% 50%

- Example

.myClass {
    transform: rotate(360deg);
    transform-origin: 0% 0%
}

.myClass {
  transform: scale(2,2);
  transform-origin: 0px 0px;
}

# 주의할 점

- 웹 애니메이션은 Anti Aliasing 이 없다.

  그래서 경계선 일그러짐 (=Jagged) 발생. 해결책은 outline: 1px solid transparent 추가