CSS3 Transform的perspective属性

以下两行语句有什么区别?

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

如果大家不清楚,请听我娓娓道来。

CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持,IE10支持。

只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单:

  1. 只能选择透视方式,也就是近大远小的显示方式。
  2. 镜头方向只能是平行Z轴向屏幕内,也就是从屏幕正前方向里看。
  3. 可以调整镜头与平面位置:
  • a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示,镜头距离元素表面的位置是300像素。
  • b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。

下面用一个正方体(或者说骰子)向大家演示视角不同视角(perspective 以及 )的差别。

镜头距离z=0平面的不同距离的效果。

镜头在z坐标固定时,x和y坐标(perspective-origin)变化时的差别。

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

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

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

<div id="animateTest" >
    <img src=http://www.webjx.com/css/"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://www.webjx.com/css/"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://www.webjx.com/css/"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放在前面好了。

时间: 2024-09-29 22:57:49

CSS3 Transform的perspective属性的相关文章

CSS3教程:Transform的perspective属性设置

1 2   <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(40deg);"> Css 1 2 <div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);"> 如果大家不清楚,请听我娓娓道来. CC

CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变

CSS3 : transform 用于元素样式的转变,比如使元素发生位移.角度变化.拉伸缩小.按指定角度歪斜 transform结合transition可实现各类动画效果 transform : transform 兼容各浏览器写法如下: 1 transform: /* 转变样式 */; 2 -ms-transform: /* 转变样式 */; /* IE 9 */ 3 -webkit-transform: /* 转变样式 */; /* Safari and Chrome */ 4 -o-tra

如何理解 css3 的 perspective 属性

一.写在前面的话 最近想多了解一下CSS3的transform 3D效果,transform:英文直译就是转换,它可以实现旋转.缩放.位移等效果,听起来有没有觉得很酷的样子,狠狠的点这里来看看旋转和位移的效果. 你应该会看到这样的效果: 纳尼?这是3D?怎么一点也不酷呢? 二.让3D效果显示出来 看不到3D效果,那是因为我们没有加上 prespective 属性,我们在外层DIV上加上 prespective: 50; ,再狠狠的点这里来看看旋转和位移的效果. 你应该会看到这样的效果: 是不是有

CSS3 transform属性 附上demo

参考http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 用法 实例 刚开始使用这个属性是因为工作的需要,制作H5动画页面,通过查具体用法也可以制作出各种小动画,比如平移,缩放,翻动,刚开始看到这些动画都很惊奇,居然短短写一小段东西就就可以完成js写一堆代码的动画了,然后看到别人家的CSS3动画,再次被教育做人了. 下面说说怎么使用 transform 定义 :t

如何使用 css3 transform 属性来变换背景图?

本文和大家分享的主要是使用 css3 transform 属性来变换背景图相关内容,一起来看看吧,希望对大家学习css3有所帮助. 使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素.目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用 . 如果你要在黑莓浏览器或者 UC 浏览器使用这个属性, 你需要加 -webkit- 前缀. #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg)

CSS3 Transform属性详解

今天我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).转换(transition)和动画(animation)等更高级的CSS3技术.本文主要介绍的是这三个属性之中的第一个──变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩

CSS3中transform几个属性值的注意点

transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文章 CSS3 Transform. 与transition配合使用的方法参考CSS动画 animation与transition 本文记录几个注意点: 1.transform:rotate(30deg),2D旋转,正值为顺时针旋转,负值为逆时针旋转,默认旋转基点是中心点,也可以通过transform

CSS3 transform 属性

div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ } 该属性允许我们对元素进行旋转.缩放.移动或倾斜. CSS3 transform是什么?

Transform-style和Perspective属性

transform-style属性 transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现.他主要有两个属性值:flat和preserve-3d. transform-style属性的使用语法非常简单: transform-style: flat | preserve-3d 其中flat值为默认值,表示所有子元素在2D平面呈现.preserve-3d表示所有子元素在3D空间中呈现. 也就是说,如果对一个元素设置了transform-style的值为flat,则