CSS 2D和3D转换解析

最新推荐文章于 2025-03-17 11:19:23 发布

mengxiang_go

最新推荐文章于 2025-03-17 11:19:23 发布

阅读量939

点赞数

分类专栏： css 文章标签： css 3d效果

本文链接：https://blog.youkuaiyun.com/mengxiang_go/article/details/63255433

版权

css 专栏收录该内容

2 篇文章

订阅专栏

2d转换相对比较简单，着重图解3D转换。
2D旋转语法如下：

这里写图片描述
使用方法就是transform：上图的API。
还有一个旋转中心是transform-origin,用来改变元素旋转的重心。
3D转换示意图

其中，perspective属性模拟人眼到3D变换物体之间的距离
也就是我们使用3d转换功能时，一定要在变换的元素的父元素上设置这个属性
比如可以设置成perspective:1200px，在PC上模拟人眼到屏幕的距离。
接下来介绍3D制作的套路

套路如下
//舞台用来设置 perspective属性，如上所有，模拟人到舞台的距离
舞台 
//容器的作用类似平时看选秀节目的摄像机，可以头上各角度拍摄下面的歌手，歌手就像是图片，容器要设置transform-style: preserve-3d，这个属性的作用是让子元素，也就是图片能够保持3D效果，如果不设置这个属性，z轴的变化是看不出来的
    容器
        图片
        图片
        图片
        ...
以下是HTML片段
<body>
    <div id="stage">
        <div id="parent">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</boy>

我们在css上也就是style标签里面设置

<style>
    #stage{
        /*主舞台800x400，并居中对齐*/
        width:800px;
        height:400px;
        border:1px solid #333;
        margin:0 auto;
        /*perspective，设置人眼到舞台的距离*/
        perspective:1200px;
    }
    #parent{
        /*容器和舞台大小一致，并且进行了3D旋转，(保证设置了transform-style:preserve-3d才有效果)让摄像机类似是从上往下看的样子*/
        width:800px;
        height:400px;
        border:1px solid #ddd;
        transform:rotatex(-30deg) rotatey(0deg);
        position:relative;
        transform-style:preserve-3d;
    }
            #parent div{
                width:100px;
                height:100px;
                background:#E4393C;
                position:absolute;
                left:350px;
                top:150px;
            }

            #parent div:nth-child(1){
                transform:rotatey(0deg) translatez(200px);
            }
            #parent div:nth-child(2){
                transform:rotatey(60deg) translatez(200px);
            }
            #parent div:nth-child(3){
                transform:rotatey(120deg) translatez(200px);
            }
            #parent div:nth-child(4){
                transform:rotatey(180deg) translatez(200px);
            }
            #parent div:nth-child(5){
                transform:rotatey(240deg) translatez(200px);
            }
            #parent div:nth-child(6){
                transform:rotatey(300deg) translatez(200px);
            }

至此，效果如下：这里写图片描述