CSS3旋转、斜切、缩放
默认分类 2014/09/04 22:14http://www.w3schools.com/css/css3_2dtransforms.asp
原文地址：http://bbs.kafan.cn/thread-1324492-1-1.html
CSS3 功能可以帮助您更轻松地构建丰富多彩、引人入胜的 Web 体验。近期的一文中曾介绍过 Web 开发人员如何能够借助 CSS3 过渡和动画为其网站增添个性。CSS3 3D 变换为开发人员强化其网站增添了一个新的维度（这一点毫不夸张）。例如，Windows 8 Metro 风格的 [Start]（开始）页使用精巧的 3D 变换来突出显示已按下的图块，如下图所示。
98.png (15.54 KB, 下载次数: 0)
2012-7-10 19:52 上传
为 CSS 变换添加第三维度
与 CSS3 2D 变换相似，3D 变换也为 CSS transform 和 transform-origin 属性提供了相应的函数和值，用于将几何变换操作应用到 HTML 元素。CSS 3D 变换对变换函数进行了扩展以支持 3D 变换。这包括扩展的变换函数，例如 rotate()、 scale()、translate()、skew() 和 matrix()，它们通过添加 Z 坐标参数来填充 3D 空间（matrix3d() 函数更是增加了 10 个额外的参数），以及额外衍生出的一些变换函数，例如 rotateZ() 和 scaleZ()。
新的 perspective 变换函数可以让距离较远的点变小，从赋予变换后的元素景深效果。
CSS3 3D 变换还增加了一些新的 CSS 属性。除了 transform 和 transform-origin 属性，IE10 还支持带有供应商前缀的 transform-style 值，包括：perspective、perspective-origin、backface-visibility 和 flat。
Perspective
perspective 变换函数对于 3D 变换来说至关重要。该函数会设置查看者的位置，并将可视内容映射到一个视锥上，继而投影到一个 2D 视平面上。如果不指定透视，则 Z 空间中的所有点将平铺到同一个 2D 视平面中，并且变换结果中将不存在景深概念。对于某些变换，例如下图显示的沿 Z 轴的变换，perspective 变换函数对于查看变换的效果来说必不可少。
transform: perspective(500px) rotateY(30deg);
99.png (12.62 KB, 下载次数: 0)
2012-7-10 19:53 上传
您可以通过在父元素中使用 perspective 属性来便捷地向多个元素添加透视变换。perspective 属性会将透视变换应用于其所有子元素：
100.png (11.15 KB, 下载次数: 0)
2012-7-10 19:54 上传
#parent {
perspective: 500px;
}
#div1 {
position: absolute;
transform-origin: 0px 0px;
transform: rotateY(30deg);
}
#div2 {
position: absolute;
transform-origin: 0px 0px;
transform: rotateY(30deg) translate(220px);
}
_复制代码_perspective-origin 属性也可以与 perspective 结合使用，以便将视点移至元素的中心以外：
101.png (36.77 KB, 下载次数: 0)
2012-7-10 19:55 上传
在下图中您可以看到，如果将透视出发点移至左侧，则位于初始透视出发点右侧的内容将显得更远。
102.png (9.66 KB, 下载次数: 0)
2012-7-10 19:55 上传
#parent {
perspective: 500px;
perspective-origin: -300px 0px;
}
_复制代码_backface-visibility
backface-visibility 属性可用于隐藏内容的背面。默认情况下，背面可见，这意味着即使在翻转后，变换的内容仍然可见。但当 backface-visibility 设置为 hidden 时，旋转后内容将隐藏，因为旋转后正面将不再可见。该功能可帮助您模拟多面的对象，例如下例中使用的纸牌。通过将 backface-visibility 设置为 hidden，您可以轻松确保只有正面可见。
CSS 标记：
.card, .card div {
position: absolute;
width: 102px;
height: 143px;
}
.card div:nth-child(1) {
background-image: url('redback.png');
}
.card div:nth-child(2) {
background-image: url('8clubs.png');
backface-visibility: hidden;
}
复制代码一张纸牌的 HTML 标记：1. <div class="card"><div></div><div></div></div>复制代码根据上述定义创建六张纸牌，并为每张纸牌的 style="transform: rotateY(ndeg)" 属性设置不同的旋转值 n，结果如下：
103.png (108.97 KB, 下载次数: 0)
2012-7-10 19:57 上传
本例中，未旋转时，您将看到第二个 div（即，草花 8），这是由于其绘制顺序位于顶部。随着向纸牌应用的旋转超过 90 度，第二个 div 的 backface-visibility: hidden; 属性将导致其不可见，因此将显示第一个 div（即，纸牌正面）。
借助动画和过渡实现 3D 变换
最重要的是，您甚至可以将 3D 变换与 CSS 过渡和动画结合使用。如果您正在使用 IE10 或支持 CSS3 3D 变换动画的其他浏览器，请尝试以下滚动文本示例，该示例是通过将 transform 属性动画化实现的。
以下 CSS 标记可实现下方屏幕快照中所显示的效果。
#parentDiv {
perspective: 500px;
perspective-origin: 150px 500px;
}
#div1 {
transform-origin: 150px 500px;
animation: scrollText 200s linear infinite;
}
@keyframes scrollText {
0% { transform: rotateX(45deg) translateY(500px); }
100% { transform: rotateX(45deg) translateY(-8300px); }
}
_复制代码_
104.png (44.24 KB, 下载次数: 0)
2012-7-10 19:59 上传
>> 留言评论