返回列表

CSS3旋转、斜切、缩放

默认分类 2014/09/04 22:14

http://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 上传