HTML+CSSの基礎知識(3)

CSS3         ，          ，             。

transition-property  :           CSS     。
transition-duration  :                  。
transition-delay  :            。  (   (     )，     (     ) )
transition-timing-function  :             。

 ：    hover 。

translate :   
    translateX
    translateY
    translateZ   ( 3d )

scale :    （       ，      1，             ）
    scaleX
    scaleY
    scaleZ   (3d)

rotate :    （     ，      deg ）
    rotateX  (3d)
    rotateY  (3d)
    rotateZ  (  rotate     ，         ，         )

skew :   
    skewX :       ，      ，      。
    skewY

transform     ：
    1.              。
    2.             ，           。
    3.     ，            。
               ，        ，        。
        translate    rotate、scale、skew   
    4. transform-origin :      
        x y z(3d)

animation-name :         (    )
animation-duration :        
animation-delay :        
animation-iteration-count :         ，     1 ，infinite    
animation-timing-function :        

 ：
    1.      ，             。
    2. @keyframes :  from -> 0%   ,  to ->  100%

animation-fill-mode :            ，         。
 	none (   ) :              ，       ， 0%      
	backwards  :         ， 0%      
 	forwards  :          ，      
 	both  :  backwards forwards    

animation-direction  :                  。
 	alternate  :      (0%~100%)，    (100%~0%)
 	reverse :        ,  100%~0%
 	normal (   ) :        ,  0%~100%

       css3   。
  	    ：https://daneden.github.io/animate.css/
 		
    ：
    animated :   (     ，          )
    infinite :        

transform:
   rotateX() :       
   rotateY() :       
   translateZ() :     ，    
   scaleZ() :        

3d  
    scale3d() :     x y z
    translate3d() :     x y z
    rotate3d() :     0|1(x         )  0|1(y         )  0|1(z         )  deg


perspective（  ）:              ，       。

perspective-origin :   -    ，       。

transform-origin: center center -50px;   （Z      ，     ）

transform-style : 3D  
    flat  (   2d)、preserve-3d   (3d，        )

backface-visibility :     
    hidden、visible (   )

background-size :         
    cover :   
    contain :    
background-origin :         
    padding-box (  )
    border-box
    content-box
background-clip :         
    padding-box 
    border-box (  ) 
    content-box 

 ：       ，      ，      

1.      -> linear-gradient  ，     background-image   

 ：   0        ，          ，        。

2.      -> radial-gradient 

font-face CSS3      ，          Web          。

    ：
  	1.              
            font-size    color
  	2.       
  	3.             
  	4.      
    5.               
    6.             

  ：
    @font-face  

     .woff             , mac、linux 。