CSS3 3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

在本章中,您将学到其中的一些 3D 转换方法:

  • rotateX()
  • rotateY()

rotateX() 方法

Rotate XrotateX()方法,围绕其在一个给定度数X轴旋转的元素

div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:rotateX(120deg);
    -webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>

 

rotateY() 方法

Rotate Y

rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。

<style> 
div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:rotateY(130deg);
    -webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>

 

 

 

 

 

posted @ 2017-09-02 15:04  QiaoZhi  阅读(208)  评论(0编辑  收藏  举报