码迷,mamicode.com
首页 > Web开发 > 详细

css3新属性transform 3D的基础笔记.

时间:2014-08-20 16:06:52      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   for   ar   2014   

研究了下css3中的 transform变换属性中的3D属性效果和看到的一篇好文章了解到了3D的学习;好文章地址:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

 

下面只是自己能读懂自己写的代码例子:

<style>
    #box{
        -webkit-perspective:800px;//定义3D场景大小
        -webkit-transform-origin:50% 50%;//定义3D场景的中心点
        perspective:800px;
        transform-origin:50% 50%;
    }
    .box{
        width:200px;
        height:200px;
        margin:0 auto;
        transfrom-style:preserve-3d;//变换的类型是3D
        background-color:green;
        -webkit-transform:rotateY(45deg) rotateX(30deg) rotateZ(25deg);//对元素作出3D模型空间轴变化
        transform:rotateY(45deg) rotateX(30deg) rotateZ(25deg);   
    }
</style>
</head>

<body>
    <div id="box">
        <div class="box"></div>
    </div>
</body>

bubuko.com,布布扣

css3新属性transform 3D的基础笔记.,布布扣,bubuko.com

css3新属性transform 3D的基础笔记.

标签:style   blog   http   color   io   for   ar   2014   

原文地址:http://www.cnblogs.com/hellome/p/3924675.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!