论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS教程:CSS3 Transform的perspective属性二

文章类别:div+css | 发表日期:12-12-18

CSS教程:CSS3 Transform的perspective属性二

使用CSS3进行3D变换很简单。

例如:让一个Div沿Y轴旋转一个角度:

上面的原始的Div和图片,下面是旋转后的效果。

<div id="animateTest" >
    <img src="http://imgcache.qq.com/ptlogin/head/1_100.gif" 
         width="100" height="100">
</div>

<div id="animateTest" 
     style="-webkit-transform: rotateY(40deg);">
    <img src="http://imgcache.qq.com/ptlogin/head/1_100.gif" 
         width="100" height="100">
</div>

第一张图是原始状态的DIV,第二张图是旋转后的效果。

是不是效果不明显?这是因为镜头离平面太远了,所以旋转效果不明显。现在我们试试perspective属性。我们设置perspect=400px。

<div id="animateTest" 
     style="-webkit-transform: perspective(400px) rotateY(40deg);">
<img src="http://imgcache.qq.com/ptlogin/head/1_100.gif" 
     width="100" height="100">
</div>

怎么样现在效果明显了吧。这就是perspective的用途。

不过在chrome中发现一个问题,那就是perspective一定要在rotateY(或rotateX)的前面。如果代码写成下面的情况,perspective的设置会无效。

<div id="animateTest" 
     style="-webkit-transform: rotateY(40deg) perspective(400px);">

在FireFox中也是这种情况。

在mozilla的文档上也没有说明这个情况。现在还不确定是设计如此还是Bug。总之大家用的时候就将prespective放在前面好了。

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058