好吧，CSS3 3D transform变换，不过如此！_CSS教程_
好吧，CSS3 3D transform变换，不过如此！
来源：人气：237
好吧，3 3D transform变换，不过如此！转自张鑫旭-鑫空间-鑫生活[]一、写在前面的秋裤早在去年的去年，我就大肆介绍了2D transform相关内容。看过海贼王的都知道，带D的家伙都不是好惹的，2D我辈尚可以应付，3D的话，呵呵，估计我等早就在千里之外被其霸气震晕了~~看看下图女帝的动作以及神情，就可以知道名字带D的家伙的厉害！最近折腾ad的一些东西，有一些3D效果的交互。有些事情，总以为是遥远的未来，谁知真正发生的时候说来就来，比如说一颗想结婚的心，又比方说在实际项目中折腾3D transform效果。然而，虽然以前折腾过3D变换效果(webkit)，但都是依葫芦画瓢，囫囵吞枣，真正要轻松实现想要的3D效果，是需要深入理解的，于是，此时的自己苦逼了，泪奔ing&&木有办法，找资料，自己思考学习呗，当我看到下面这张基本图的时候，我的右侧的浓眉毛不由自主抖动了两下，呵，呵呵~~这个长得像原子核一样的是什么东东？那像章鱼哥一样四处横生的箭头好吓人哦！后面怎么还有一个苍蝇拍？？CSS好可怕，我要回去找妈妈&&想必大部分的同行应该跟我一样，没有爱因斯坦爷爷的智商，没有上镜需要把表摘掉的爸爸。因此，那些术语连篇的CSS3 3D transform介绍的资料过于耀眼，无法直视。怎么办？好吧，佛家有云，我不入地狱谁入地狱。这里，我就从凡人们的视角说说CSS3 3D transform的一些东西，希望说的东西比较亲民，不要吓着大家。二、首先，情感化认识我觉得吧，要想理解一个东西，最好先有一些感性的认识。CSS3中的3D变换效果，本质上就是我们OOXX时候各种姿势的变换，又称各种体位的变换。虽然都是成年人，但考虑到仍有不少窝中待守的雏鸟，如果上面的解释想不过来，就想想以下这些：1.下图的这些人在干嘛？跳水？NO, No, No!! 记住，他们不是在跳水，是在做3D变换！！！2.下图可爱baby在干嘛？广播体操？NO, No, No!! 记住，他不是在做操，是在做3D变换！！！3.来到2次元，下图这个妹子在这幅姿态称为：卖萌？NO, No, No!! 记住，他不是在卖萌，是在做3D变换！！！哈哈哈哈，是否意识到：在显示世界中，一切的动作（包括上面巨乳萌妹所引发的精虫上脑），都是属于3D transform变换。 因此，要学习与理解3D transform变换很简单，一句话，到现实世界找个东西映射一下即可。三、认识的突破口：rotateX, rotateY, rotateZ3D transform中有下面这三个方法：rotateX( angle )rotateY( angle )rotateZ( angle )理解了这三个方法，后面更难懂的perspective就好下手了，可以说是突破口！rotate旋转的意思，rotateX旋转X轴，rotateY旋转Y轴，rotateZ旋转Z轴&&什么X轴/Y轴/Z轴，这几个词从我嘴里一出来，别说你们，我自己都晕了~~赶快，从现实世界找对应东西理解（参照下面人的旋转）：邹凯的体操单杠运动是rotateX；蔡依林姐姐的钢管舞是rotateY；旋转飞刀的特技表演是rotateZ。还是理解不过来？好吧，假设你是男的，以你的女朋友举例，假如原本你和她面对面站着，然后你&&从正面将其推到就是rotateX；让其原地转个90度欣赏其侧面的丰满曲线就是rotateY；把妹子抱到床上侧面躺着就是rotateZ。于是，下面CSS世界中的简单3D效果是不是更容易理解了呢？！//zxx: 下面为广告~~注意不要勿点~~嘻嘻~~四、必不可少的perspective属性perspective的中文意思是：透视，视角！perspective属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D.我们初中学美术，或者学建筑的同学肯定接触过透视的一些东西：不过，CSS3 3D transform中的透视的透视点与上面两张示例图是不同的：CSS3 3D transform的透视点是在浏览器的前方！或者这么理解吧：显示器中3D效果元素的透视点在显示器的上方（不是后面），近似就是我们眼睛所在方位！比方说，一个1680像素宽的显示器中有张图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(&2000)看到的真实效果一致！！五、translateZ帮你寻找透视位置如果说rotateX/rotateY/rotateZ可以帮助理解三维坐标，则translateZ则可以帮你理解透视位置。我们都知道近大远小的道理，对于没有rotateX以及rotateY的元素，translateZ的功能就是让元素在自己的眼前或近或远。比方说，我们设置元素perspective为201像素，如下：perspective: 201则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓&一叶蔽目，不见泰山&，就是这么回事。当translateZ值再变大，超过201像素的时候，该元素看不见了&&这很好理解：我们是看不见眼睛后面的东西的！再生动的文字描述也不如一个实例来得直观，您可以狠狠地点击这里：translateZ方法辅助理解perspective视角demo建议浏览器下访问，可以使用range控件，演示效果更赞，如下截图：-100时候最小，200时候超级满屏（垂直方向因特殊布局限制没有显示），250的时候因为元素已经在视点之外，因此是一片空白（看不见）。<img class="alignnone" title="translateZ为
优质网站模板CSS3--perspective属性
CSS3--perspective属性
MDN官方文档说明：
perspective&属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z&0的三维元素比正常大，而z&0时则比正常小，大小程度由该属性的&#20540;决定。
三维元素在观察者后面的部分不会绘制出来，即z轴坐标&#20540;大于perspective属性&#20540;的部分。
默认情况下，消失点位于元素的中心，但是可以通过设置属性来改变其位置。
属性&#20540;为0或负&#20540;或none（none是默认&#20540;）时，没有透视效果。
----------------------------------------------------------------------------------------------------------------------------
CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持，IE10支持。
只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单：
只能选择透视方式，也就是近大远小的显示方式。镜头方向只能是平行Z轴向屏幕内，也就是从屏幕正前方向里看。可以调整镜头与平面位置：
a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。
下面用一个正方体（或者说骰子）向大家演示视角不同的差别。
镜头距离z=0平面的不同距离的效果。
（中心是虚线框）
镜头在z坐标固定时，x和y坐标（perspective-origin）变化时的差别。
使用CSS3进行3D变换很简单。
例如：让一个Div沿Y轴旋转一个角度：
上面的原始的Div和图片，下面是旋转后的效果。
&div id=&animateTest& &
&img src=&&
width=&100& height=&100&&
&div id=&animateTest&
style=&-webkit-transform: rotateY(40deg);&&
&img src=&&
width=&100& height=&100&&
第一张图是原始状态的DIV，第二张图是旋转后的效果。
是不是效果不明显？这是因为镜头离平面太远了，所以旋转效果不明显。现在我们试试perspective属性。我们设置perspect=400px。
&div id=&animateTest&
style=&-webkit-transform: perspective(400px) rotateY(40deg);&&
&img src=&&
width=&100& height=&100&&
怎么样现在效果明显了吧。这就是perspective的用途。
不过在chrome中发现一个问题，那就是perspective一定要在rotateY（或rotateX）的前面。如果代码写成下面的情况，perspective的设置会无效。
&div id=&animateTest&
style=&-webkit-transform: rotateY(40deg) perspective(400px);&&
在FireFox中也是这种情况。
在mozilla的文档上也没有说明这个情况。现在还不确定是设计如此还是Bug。总之大家用的时候就将prespective放在前面好了。
我的热门文章
即使是一小步也想与你分享CSS3&3D&&&建立一个3D场景(perspective&perspective-origin)
从昨天晚上开始看CSS3D，有个想法之前想用webGL来实现，后来发现CSS3也如此强大，而且不卡，就转投CSS了。。。
现在有抱着电脑从侧面看的冲动了。。。吧一些自己的理解记下来，写的不对的还请大家指正，谢谢。
没有坐标系就没有一切，牢记下面的图吧！
css比webgl简单就在于定义几个样式3d效果就出来了（不过这也导致不够灵活）。详细定义在&
这里只找简单的说说。
注意，以下的名称各个浏览器不一样，webkit的内核请加前缀-webkit-
，如transform，在使用时要定义成-webkit-transform；firefox前缀是-moz-;
-webkit-transform-style:
preserve-3d;就可以设定一个3D场景了，不过想要实现效果还需要设定下面参数
perspective 透视
简单的说就是3D场景展现在屏幕上时是以那个位置查看的结果（远近而不是距离）。比如你要建立一个小立方体，长宽高都是40px。如果你的perspective
& 40 ，那就相当于站在盒子里面看的结果，如果perspective
非常大那就是站在非常远的地方看（立方体已经成了小正方形了）
(粉红色是页面背景 -webkit-perspective: 90;-webkit-perspective-origin:
同时还需要有个透视位置perspective-origin ，这个默认是center center
。还是说小立方体，如果你站在中心线的位置看，会看到左右对称；如果站在高于顶部的位置看，就会看到其他立体效果。（注意，高于顶部等于Y减小）
（-webkit-perspective: 90;-webkit-perspective-origin: 50% -60
立方体长宽均为40px；注意是视角不同，而没有对立方体进行旋转）
要注意perspective只对子代有效。
3D场景有了就可以将平面上的div移动到面前面或后面了。这个以后再说～
提供一个演示，显示一个3D立方体，只支持webkit内核浏览器。
写blog总是语无伦次，把我学习时用到了的资料贴上吧，还是不太好找的。。
CSS 3D Transforms Module
Safari CSS Visual Effects Guide &
Transforms
Webkit.org 3D Transforms
safaridemos
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。CSS 参考手册
CSS3 perspective
实例 设置从何处查看一个元素的角度：
div { perspective: 500; -webkit-perspective: 500; /* Safari and Chrome */ }
浏览器支持
所有主流浏览器都不支持perspective属性。 Safari和Chrome使用私有属性-WebKit-perspective获得支持。
属性定义及使用说明 多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。 定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。 注意：perspective 属性只影响 3D 转换元素。 提示: 请与
属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
默认值： none
版本： CSS3
JavaScript 语法：
object.style.perspective=500
perspective: number|
number 元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视。亲们该页面内会员们分享的“作品”，版权为才华横溢的原作者们所有滴，不得商业使用！
& & & & & & & & & & & & & & & & & & & &这是一款效果非常炫酷的纯CSS3 3D旋转立方体动画特效。该3D立方体使用CSS3 perspective制作，可以在水平方向、垂直方向和平面视角方向旋转，效果相当震撼。这是一款神奇的纯 CSS3 立方体动画特效插件。使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚，从简单的颜色和尺寸动画，到复杂的旋转、翻转动画， CSS3 展现了它无穷的魅力。使用CSS来制作立方体动画，代码简洁易懂，效果更是令人惊叹！下面来看看制作方法。HTML结构立方体结构中，使用一个wrapper div来包裹立方体。在里面使用6个div来制作立方体的6个面。&div&class=&wrap&&
&&&&&div&class=&cube&&
&&&&&&&&&div&class=&front&&front&/div&
&&&&&&&&&div&class=&back&&back&/div&
&&&&&&&&&div&class=&top&&top&/div&
&&&&&&&&&div&class=&bottom&&bottom&/div&
&&&&&&&&&div&class=&left&&left&/div&
&&&&&&&&&div&class=&right&&right&/div&
&&&&&/div&
&/div&立方体的每一个面都有它自己的元素。我们稍后会使用CSS来将立方体的6个面放置到正确的位置上。CSS样式在立方体的CSS样式中，首先要关注的是立方体的wrapper div。为了制作3D效果，我们需要为它提供一个
属性。.wrap&{
&&&&perspective:&800
&&&&perspective-origin:&50%&100
}CSS perspective属性是一个比较复杂的CSS3属性。最好的理解它的方法是看完文档后，自己动手修改一下DEMO中的perspective属性来看看它的变化。下面需要给包含立方体6个面的立方体的容器.cube提供样式：.cube&{
&&&&position:&
&&&&width:&200
&&&&transform-style:&preserve-3d;
}给立方体容器200像素的宽度，并设置为相对定位，这样在它里面的立方体的6个面可以设置为绝对定位。preserve-3d属性确保所有6个面都处于3D立体状态。在为6个面设置它们的位置之前，先给它们一些通用的样式：.cube&div&{
&&&&position:&
&&&&width:&200
&&&&height:&200
}在进过上面对立方体6个面的一系列设置之后，现在我们可以为6个面制作变形效果，以使它们组装为一个立方体。.back&{
&&&&transform:&translateZ(-100px)&rotateY(180deg);
&&&&transform:&rotateY(-270deg)&translateX(100px);
&&&&transform-origin:&top&
&&&&transform:&rotateY(270deg)&translateX(-100px);
&&&&transform-origin:&center&
&&&&transform:&rotateX(-90deg)&translateY(-100px);
&&&&transform-origin:&top&
&&&&transform:&rotateX(90deg)&translateY(100px);
&&&&transform-origin:&bottom&
&&&&transform:&translateZ(100px);
}rotateY的值可以旋转立方体的各个面，使上面的文字处于正确的位置上。而 translateZ 的值使元素在指定容器中向前或向后移动。translateY的值看起来有些混乱，但是请记住，它的作用是通过透明的面板来使指定的面升高或降低来制作3D效果。每一个面都有自己的translations值来使它们处于适当的位置上。你可以自己修改一下这些值来看看效果。水平旋转的立方体该效果是DEMO1中的第一种效果。我们使用关键帧技术来使立方体在水平方向上旋转：@keyframes&spin&{
&&&&from&{&transform:&rotateY(0);&}
&&&&to&{&transform:&rotateY(360deg);&}
&&&&animation:&spin&5s&infinite&
}是不是比想象中的要简单得多？6个面上的文字在立方体旋转时都处于正确的位置上。使用关键帧可以制作出许多神奇的动画效果。垂直旋转的立方体该效果是DEMO1中的第二种效果。要在垂直方向上旋转立方体只需要简单的改变动画的旋转轴为Y轴。但是这种情况下面板上的文字有时候会显示在相反的方向上，所以我们需要修改一下元素旋转的代码：@keyframes&spin-vertical&{
&&&&from&{&transform:&rotateX(0);&}
&&&&to&{&transform:&rotateX(-360deg);&}
.cube-wrap.vertical&.cube&{
&&&&margin:&0&&/*&keeps&the&cube&centered&*/
&&&&transform-origin:&0&100
&&&&animation:&spin-vertical&5s&infinite&
.cube-wrap.vertical&.top&{
&&&&transform:&rotateX(-270deg)&translateY(-100px);
.cube-wrap.vertical&.back&{
&&&&transform:&translateZ(-100px)&rotateX(180deg);
.cube-wrap.vertical&.bottom&{
&&&&transform:&rotateX(-90deg)&translateY(100px);
}扁平旋转的立方体该效果是DEMO1中的第三种效果。该效果中移除了立方体的3D效果，每次只显示一个面。要做到只一点，我们可以从wrapper中移除perspective和原点的设置：.wrap&{
&&&&/*&no&more&perspective&*/
&&&&perspective:&
&&&&perspective-origin:&0&0;
}现在立方体每次只会显示一个面。
下载资源：3 次
错误提交：
大小：28.78KB
================关于优设记================
“优设记“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博：同步网站更新内容，订阅jquery资源 @吐槽优设记，欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接：
非特殊说明，本文版权归原作者所有，转载请注明出处
我当前G币余额：0
已下载次数：3
注：购买该插件的用户当日可免费下载 插件作者可永久免费下载
所需G币：20
下载提示：由于文件较小，请直接点击下载，不支持迅雷等下载工具。
不足，你可以通过
你可以直接下载，不消耗G币
自从有了优设记，妈妈哪哪都放心，妥妥的~感谢您对优设记的支持。
&浙ICP备号-1 & Copyright (C) 2013
All Rights Reserved 您是第2717645位访客！