CSS3_3D转换

最新推荐文章于 2024-08-13 11:46:19 发布

时间解

最新推荐文章于 2024-08-13 11:46:19 发布

阅读量399

点赞数

分类专栏： CSS 文章标签： css3 rotateX rotateY

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS3_3D转换 [transform]

2D转换是在平面上进行转换，而3D转换是在空间上进行转换。

rotateX()方法

控制元素围绕x轴进行旋转。

控制一个区域绕x轴旋转120度

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:75px;
    background-color:yellow;
    border:1px solid black;
}
div#div2
{
    transform:rotateX(120deg);
    -webkit-transform:rotateX(60deg); /* Safari and Chrome */
    -moz-transform:rotateX(120deg); /* Firefox */
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

<p><b>注释：</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p>

</body>
</html>

rotateY()方法

控制元素围绕y轴进行旋转。

控制一个区域绕y轴旋转130度

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:75px;
    background-color:yellow;
    border:1px solid black;
}
div#div2
{
    transform:rotateY(130deg);
    -webkit-transform:rotateY(130deg); /* Safari and Chrome */
    -moz-transform:rotateY(130deg);    /* Firefox */
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

<p><b>注释：</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p>

</body>
</html>