css3小知识点收录

最新推荐文章于 2023-11-10 17:34:25 发布

小白变怪兽

最新推荐文章于 2023-11-10 17:34:25 发布

阅读量390

点赞数 1

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/u013558749/article/details/51024256

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.css3实现3d效果；
在这里只记录一个简单的小案例，详细学习请看http://www.w3cplus.com/css3/css-3d.html

html代码：

        <div class="camera">
            <div class="space">
                <div class="box"></div>
            </div>
        </div>

css代码 :

*{ margin: 0; padding: 0; }
.camera{ width: 300px; height: 300px; perspective-origin: 100px 100px; perspective: 150px; }
.space{ width: 200px; height: 200px; border: 1px solid red; transform-style: 3d; }
.box{width: 100px; height: 100px; background: deepskyblue; position: absolute; transform: translateX(50px) translateY(50PX) rotateY(60deg);  translateZ(150px)}