您的位置：首页 > Web前端 > CSS

css3小知识点收录

2016-03-31 10:48 537 查看
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)}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航