CSS3学习手记（7） CSS3装换 3D转换

 

CSS 3D转换

  • CSS3 rotate3d()

  • CSS3 translate3d()
  • CSS3 scale3d()
  • CSS3 matrix3d()
  • CSS3 perspective()

 

 

 

 

 

 

rotate3d 指定对象的3D旋转角度

语法 transform:rotate3d(x,y,z,angle)

参数说明 

前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
     div{width: 500px;height: 200px;background: #abcdef;margin: auto;}
     div>img{transform:rotate3d(1,1,1,45deg)}
        </style>    
    </head>
    <body>
     <div><img src="images/1.jpg" style="width:100%;height:100%"></div>
    </body>
</html>

 

posted @ 2017-06-27 10:34  星河mio  阅读(197)  评论(0)  编辑  收藏  举报