首页 > 代码库 > css3新属性transform 3D的基础笔记.

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

研究了下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>