css3-3D转换

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

3D转换方法

• rotateX()
• rotateY()

代码

<style>
    .wrap{
        width: 300px;
        padding: 50px;
        margin: 100px 100px;
        border: 1px solid #000;
    }
    .rotateX{
        transform: rotateX(45deg);
        -ms-transform: rotateX(45deg);        /* IE 9 */
        -webkit-transform: rotateX(45deg);    /* Safari and Chrome */
        -o-transform: rotateX(45deg);        /* Opera */
        -moz-transform: rotateX(45deg);        /* Firefox */
    }
    .rotateY{
        transform: rotateY(45deg);
        -ms-transform: rotateY(45deg);        /* IE 9 */
        -webkit-transform: rotateY(45deg);    /* Safari and Chrome */
        -o-transform: rotateY(45deg);        /* Opera */
        -moz-transform: rotateY(45deg);        /* Firefox */
    }
</style>

<p>转换之前的div</p>
<div class="wrap">转换之前的div</div>

<p>rotateX()方法</p>
<div class="wrap rotateX">
    rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
</div>

<p>rotateY()方法</p>
<div class="wrap rotateY">
    rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
</div>

效果

转换之前的div

rotateX()方法

rotateY()方法