第14章 移动网页设计基础CSS3.ppt

14.5.2 旋转rotate rotate()方法通过指定的角度参数对原元素指定一个2D旋转，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。 14.5.3 缩放scale 通过scale()方法，元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）参数。缩放scale和移动translate是极其相似，也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。 14.5.4 扭曲skew 扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。 14.5.5 矩阵matrix() matrix()方法把所有2D转换方法组合在一起。matrix()方法需要六个参数，包含数学函数，允许旋转、缩放、移动以及倾斜元素，相当于直接应用一个变换矩阵。 CSS3的“过渡”（transition）特性能在Web制作中实现一些简单的动画效果，让某些效果变得更具流线性、平滑性。 14.6 过渡 CSS3“动画”特性能够实现更复杂的样式变化，以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。 14.7 动画 14.7.1 规则声明动画@keyframes 如需在CSS3中创建动画，需要学习@keyframes规则。@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。 不同的浏览器要给@keyframes添加不同的前缀，为使动画在所有浏览器正常工作，可以同时声明多个不同前缀的同名动画 。 14.7.2 animation使用动画 animation只应用在页面上已存在的DOM元素上，使用CSS3的Animation制作动画可以省去复杂的代码。CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件（hover事件或click事件等）才会随时间改变其CSS属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素CSS的属性值，从而达到一种动画的效果。 在CSS3中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。 14.8 用户界面 14.8.1 box-sizing box-sizing是CSS3的box属性之一。box-sizing属性允许以确切的方式定义适应某个区域的具体内容。例如，假如需要并排放置两个带边框的框，可通过将box-sizing设置为border-box。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 14.8.2 resize 在CSS3，resize属性规定是否可由用户调整元素尺寸。 14.8.3 outline-offset outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 CSS3是现在Web开发领域的技术热点，它给Web开发带来了革命性的影响。下面介绍CSS3应用的例子，从中你能体会到CSS3中许多让人欣喜的特性。 14.9 实例应用 14.9.1鼠标放上去显示全部内容 下面制作一个鼠标移动到文字上显示全篇文章内容的实例，其代码如下。 14.9.2 美观的图片排列 本例演示如何排列美观的图片，并旋转图片。 14.10经典习题 1. 填空题 （1）__________可以说也是CSS3中的重量级属性，从其字面意思上看，我们可以理解为“边框图片”，通俗的说也就是使用图片作为边框，这样一来边框的样式就不像以前那样只有实线、虚线、点状线那样单调了，通过CSS3的__________属性，可以使用图片来创建边框。 （2）_________属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。 2. 上机操作题 制作如图14.44所示的美观排列图片 。 * 教学内容：CSS3是CSS规范的必威体育精装版版本，在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些问题，例如圆角功能、多背景、透明度、阴影等功能