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

CSS3d

时间:2016-03-22 00:38:30      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:


【HTML】 <div id="a"><img src="m.png"></div>

 

【CSS】

body{

margin:400px;
}

#a{

 

   perspective:1000px; 

【设置查看者的位置,以整个舞台作为视角对象】  ;

【开启3d效果需要3D惟一的HTML结构,必须有父元素包含<div id="a">】
}

 

img{

transform:translate3d(0px,0px,-190px);

transform:scale3d(1,1,1) rotateX(40deg);
3D缩放拉伸,单独设置无效,需要加上角度

transform:rotate3d(0,0,-225,45deg);
3D旋转



 transform:rotate3d(0,1,0,45deg); 

transform:perspective(1000px) rotate3d(0,0,0,45deg);
【设置查看者的位置,以每张图片作为视角对象,每张图效果相同】

}

CSS3d

标签:

原文地址:http://www.cnblogs.com/webday/p/5304415.html

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