css3에서 변형 함수(같은 원소에 대한)와 원소는 자신의 속성을 바꾸어 애니메이션 효과를 얻는다

 
 
 
  
 1  /*       （  、  、  、  ）*/
 2  .wrapper{
 3    margin:100px 100px auto auto;
 4    width:300px;
 5    height:200px;
 6    border:2px dotted blue;
 7 }
 8 .wrapper div{
 9     width:300px;
10     height:200px;
11     background:red;
12     color:blue;/*             */
13     text-align:center;/*                  */
14     line-height:200px;/*       */
15     border-radius:30px;/*       */
16     
17     /*  */
18     transform-origin:top right;/*         top center right left bottom                  top right       */
19     
20     /*  */
21     transform:rotate(20deg);/*   20°，       ，        */
22     transform:skew(15deg,20deg);/*x   15°，y   20°*/
23     transform:scale(1.5,0.5);/*     x    1.5  y   0.5 */
24     transform:translate(-100px,50px);/* x      100px， y         
25     50px*/
26    }
27  span{
28        display:block;/*         */
29         }
  
 
 
 
 
 
 
  
 
 
          、    ，               ，            css    
           ：
  
  transition-property:width;//그 속성에 대한 변화를 나타낸다
  transition-duration:5s;//애니메이션이 지속되는 시간을 나타냅니다
.
  transition-timing-function:ease; 
  
  transition-delay:0.5s;//애니메이션 지연 시간 표시
  ：
 1    .wrapper{
 2    margin:auto;
 3    width:300px;
 4    height:200px;
 5    border:2px dotted blue;
 6 
 7    transition-property:all;/*  hover        ，  width     width            
 8                                             ， height     50px       */
 9    transition-duration:5s;/*         */
10    transition-timing-function:ease-in;/*             */
11    transition-delay:0.15s;/*         */
12 }
13 .wrapper:hover
14 {
15   width:500px;
16   height:50px;
17 }