safari css visual effects guide 之3d transforms
来源：互联网 发布：小霸王网络机顶盒 编辑：程序博客网 时间：2024/05/25 21:36
苹果官方的css开发指南
https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Using2Dand3DTransforms/Using2Dand3DTransforms.html#//apple_ref/doc/uid/TP40008032-CH15-SW16
人家的响应式设计，没话说。。。。
标准的html坐标系只有两个坐标，x轴和y轴。x右为正方向，y下为正方向。在3的变换时，加入了z轴，屏幕为原点，向用户方向为正方向。
3d变换把元素移出xy平面（z=0），即屏幕。变换后的元素依然是二维的，但是处在另外一个平面上。变换包括沿z轴平移，绕xy轴旋转，或以上的若干组合。
所有html元素都有z-index。z-index控制元素覆盖时的渲染顺序。z-index与z轴无关。变换后的元素也遵守标准的渲染规则，z-index高的元素覆盖z-index低的元素。当有相同的z-index时，有较大z轴坐标的区域会覆盖其他。
添加3d视角
为了让元素在渲染的时候有深度，你必须指定一个视角。如果你不指定视角而是用3d变换，元素看上去是平的。例如，如果你不指定视角而绕y轴旋转一个元素，它只是显得更窄。如果在默认xy平面旋转90度，它只能看见边缘，元素要么消失，要么只是一条线。
添加视角真实扭曲元素的显示，近大远小。元素越近，扭曲越严重。为了让safari创造出深度的效果，必须指定视角。一旦safari知道了元素里人眼多远，它就能知道在哪实施多大的扭曲。
使用-webkit-perspective属性来为所有子元素设置视角。例如，
<div style="-webkit-perspective: 400px;">视角用离屏幕的距离指定。单位可以使任何css距离单位。px是默认单位。
例6-5使用滑动条设置-webkit-perspective。
<html><head> <title>applying perspective</title><style><script type="text/javascript">function setView(value) { document.getElementById("showVal").innerHTML=value+"px"; document.getElementById("view3d").style.webkitPerspective=value+"px";}</script></head><body><div id="view3d" style="-webkit-perspective: 400px;"> <div class="tilted" style= "-webkit-transform: rotateX(45deg); -webkit-transform-origin: 50% 80%;"> <p> Once upon a time, in a third dimension far, far, away, a paragraph of text went on and on and on and on and on and on and on and on and on and on and on on and on and on and on and on and on and on and on and on and on and on... </p> </div></div><p>Perspective:</p><input type="range" min="150" max="800" value="400" step="5" onchange="setView(value);"><p id="showVal"> 400px </p></body></html>效果见原文。你可以假想视角为一个金字塔，塔尖在用户的眼睛，塔底延伸至无穷远。设置视角，其实是指定了塔尖在屏幕上多高的位置。默认情况下，塔尖的xy坐标是元素的中心。
设置-webkit-perspective-origin 来改变视角的xy位置。默认为-webkit-perspective-origin ：50% 50%。设置为元素的左上角使用，-webkit-perspective-origin ：0px 0px。
视角原点会影响元素的可见性。例如，如果元素在默认平面里旋转90，它只显示边缘：如果视角是正对着元素，就什么都看不见了；但如果原点在其他位置，元素的一面可以看见。例如，例6-6创建了三个div，每个都旋转90度，左右div可见，但窗口大小合适的时候，中间元素时不可见的。
<html><head> <title>perspective origin</title></head><style>.body { width: 200px; height: 200px; background-color: beige; border: 1px solid brown; font-size: 150%; padding: 10px; -webkit-transform: rotateY(90deg);}</style><body style="-webkit-perspective: 10cm;"> <div class="body" style="position:absolute; left:50px; top: 70;"> <h2>Left</h2> </div> <div class="body" style="position:absolute; left:250px; top: 70;"> <h2>Center</h2> </div> <div class="body" style="position:absolute; left:450px; top: 70;"> <h2>Right</h2> </div> <p align="center">The center element is edge-on, and not visible.</p></body></html>创造3d空间
默认情况下，子孙元素被填充到其父元素的平面中。对一个元素3d变换时，其子元素也相应的转换到这个元素的平面上。如果想要继续按照这个元素的平面对其子孙进行变换，必须设置-webkit-transform-style为preserve-3d，进而创建一个3d空间。例如
<div id="space3d" style="-webkit-transform-style: preserve-3d;">这样设置使元素成为一个3d容器；所有它的直接孩子都可以独立的进行相对于父节点的3d变换。由于html元素是平的，变换后的子孙同样使用一个3d空间中的平面。每个孩子可以使用相同或不同的平面。默认下，每个子孙都填充到他们的父节点平面中。设置preserve-3d只影响直接孩子。
3d容器可以套嵌。使容器子孙的一个变化创造出套嵌的3d图层；这个子孙的子孙可以按照它们容器的空间进行3d变化。只有你需要对某个元素的子孙进行3d变化时，才需要启用其3d。
任何对容器的变换都是继承的。旋转最高层的3d容器，会旋转这个容器的所有内容。
例6-7给出了一个套嵌3d容器的例子。
<body><div id="view3d" style="-webkit-perspective: 15cm; -webkit-transform-style: preserve-3d;"> <div id="nested3dContainer" class="tilted" style= "-webkit-transform-style: preserve-3d; -webkit-transform: rotateX(45deg); "> <p style="-webkit-transform: rotateY(35deg); -webkit-transform-origin: 100% 50%;"> And so the text seems to lift off the page and float, as if transformed. Well, I suppose it is transformed, and that explains the appearance, if not quite the magic, of it... </p> </div></div></body>总的来说，你只需一个容器：所有3d变换按照默认xy平面只需，所有全局的变换针对容器。有时候，一些变换的元素可以按照组来操作，这时套嵌容器很好用。
取消元素子孙的3d变换，设置-webkit-transform-style为flat。对这种元素的3d变换不会产生新的平面。
3d变换函数
3d变换使用-webkit-transform属性。可以使用一个或多个变换函数来实现3d变换，或者使用3d矩阵。下面是一些函数：
translateZ(distance)—z轴平移translate3d(x, y, z)—3d移动rotateX(degrees)—沿x轴旋转rotateY(degrees)—沿y'轴旋转perspective(distance)—设置一个元素的视角
3d平移通过改变坐标值移动元素。例如：
<div style="-webkit-transform: translateZ(100px);"><div style="-webkit-transform: translate3d(100px 10cm -100px);">3d移动和相应的2d移动一样。只是z坐标不能为百分数，只能为正负。所有子孙继承平移变换。
3d旋转
可以对元素进行xy轴旋转。例如：
<div style="-webkit-transform: rotateX(45deg);"><div style="-webkit-transform: rotateY(-45deg);">
旋转是按照虚拟的贯穿元素原点的轴进行的。默认是在元素中间。正x把上边缘转走，正y把右边缘转走。所有子孙继承旋转变换。
为单个元素设置视角
为了创造一个3d空间，你需要创建一个容器。但如果只是单个的元素，可以直接设置-webkit-transform 为包括 perspective(distance)的一组函数。例如
<div style="-webkit-transform: perspective(10cm) rotateX(45deg);">此方法不推荐。
背面的可见性
如果一个元素旋转超过90度，背面将被展现。背面总是透明的，所有用户看到了反向的东西。为了避免这个效果，可以如下设置：
-webkit-backface-visibility: hidden;当这样设置时，元素在背面朝上时将不可见。这个设置是为了产生卡片两面的效果。例如：
<html><head> <title>flip card</title><style>body { -webkit-transform-style: preserve-3d; -webkit-perspective: 600px; }.card { position: absolute; left: 100px; top: 100px; padding: 50px; height: 200px; width: 100px; border-radius: 10px; border: 1px solid tan; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 1s;} .front { background: seashell; }.back { background: beige; -webkit-transform: rotateY(180deg);}</style><script type="text/javascript">var state = 1;function flipCard() { if (state) { document.getElementById("front").style.webkitTransform="rotateY(-180deg)"; document.getElementById("back").style.webkitTransform="rotateY(0deg)"; state = 0; } else { document.getElementById("front").style.webkitTransform="rotateY(0deg)"; document.getElementById("back").style.webkitTransform="rotateY(180deg)"; state = 1; } }</script></head><body><div class="card back" id="back" onclick="flipCard();">Back of card</div><div class="card front" id="front" onclick="flipCard();">Front of card</div></body></html>
<p> This text is rotated 45 degrees around its x-axis. </p></div>
- safari css visual effects guide 之3d transforms
- Quartz 2D Programming Guide-Transforms
- Quartz 2D Programming Guide-Transforms
- <3D Transforms>简译
- After Effects 7 for Windows and Macintosh: Visual QuickPro Guide
- CSS3 3D Transforms
- CSS3 3D transforms系列-3D旋转木马
- iPhone之Quartz 2D系列--变换（5）Transforms
- iPhone之Quartz 2D系列--变换（5）Transforms
- iPhone之Quartz 2D系列--变换（5）Transforms
- iPhone之Quartz 2D系列--变换（5）Transforms
- Silverlight 3D Effects(透视变形)
- <CSS Transforms>译文
- CSS Transitions and Transforms
- CSS3 3D Transforms各浏览器支持情况
- Deformable 3D shape registration based on local similarity transforms
- javafx visual effects
- CSS之3D变换
- java学习第一天
- Android横竖屏切换小结
- 安装glibc库
- Android PNG渐变背景图片失真问题
- 中国联通被指乱扣费 返还金额限制用
- safari css visual effects guide 之3d transforms
- 一个简单的打开文档对话框
- Intent跳转到系统应用中的拨号界面、联系人界面、短信界面及其他
- C++异常处理
- sh 脚本里执行的export不起作用
- 好久不来了。
- 常用分页函数辅助类
- java获取classpath路径
- org.hibernate.NonUniqueObjectException
