《基于新信息技术的HTML5和CSS3网页设计进阶教程》课件_第9章.pptxVIP

第9章CSS3的变形处理;

CSS3中新增了Transform属性，可以对元素进行变形，即对元素进行移动、缩放转动、或倾斜等操作。Transform变形转换可以分为2D和3D转换。

Transform属性语法为：

参数none表示不进行变换，为默认值；transform-function表示一个或多个变换函数，以空格分开。也就是说，Transform属性可以同时对一个元素进行多种不同的变换操作。

;

9.1Transform2D转换

;

translate()的参数为像素，也可以是百分数。

translate()只是简单地对元素进行位移，很好理解。通过图9-1所示，我们能更加直观地看到它的功能。

;

需要注意的是，使用translate()移动的元素，在正常流布局中，它所占的位置还是原本的位置，因此，被移动的元素有可能会遮挡其他元素。

如以下代码：

;;

在上面的代码中，将a元素设置为inline-block，使用translateY()方法向下移动40像素。可以看到，a元素向下移动了40像素，但它本来的位置空了出来并没有被其他内容占据，其他内容也没有任何改变，a元素压在了其他的文字上面。页面显示效果如图9-2所示。

;;

9.1.2缩放scale()

缩放Scale()和移动translate()非常相似，也有3种情况：scale(x，y)表示水平方向和垂直方向同时缩放；scaleX(x)表示仅水平方向缩放；scaleY(y)表示仅垂直方向缩放。具体语法如下：

;

scale()的参数为数值，没有单位。缩放就是既可以缩小，也可以放大；缩放基数为1，大于1放大，小于1缩小；也可以是负值，负值为翻转。缩放的中心点为元素的中心位置。

scale()具体使用效果如图9-3所示。

;

scale()还能够对元素进行翻转，参数使用负值即可，效果如图9-4所示。

;

9.1.3转动rotate()

rotate()方法通过指定的角度参数对元素进行2D旋转，需要先设置transform-origin属性。具体语法如下：

;

rotate()方法的参数设置指旋转角度，单位跟随在参数值后。一般为度数，单位为“deg”，如果设置的值为正数则顺时针旋转，如果设置的值为负数则逆时针旋转。另外，还有一些其他单位可以使用：

●?deg：1deg为1度，360deg代表一圈。

●?grad：1grad为1梯度，400grad代表一圈。

●?rad：1rad为1弧度，2πrad代表一圈。

●?turn：1turn为1圈，即360deg。

;

以最常用的deg单位为示例，旋转效果如图9-5所示。

;

9.1.4倾斜skew()

倾斜skew()也有3种情况：skew(x，y)表示水平方向和垂直方向同时倾斜；skewX(x)表示仅水平方向倾斜；skewY(y)表示仅垂直方向倾斜。具体语法如下：

;

skew()方法的参数也是角度，单位可使用deg和rad。

以最常用的deg单位为示例，倾斜效果如图9-6所示。

;

●?skew()方法是Transform2D转换中最难理解的一个，通过观察图9-6，我们可以得出以下简单结论：

●?skewX(x)：x轴不动，将y轴逆时针旋转x角度。此旋转的角度即现在y轴与原来Y轴所成的角度。

●?skewY(y)：y轴不动，将x轴顺时针旋转y角度。此旋转的角度即现在x轴与原来X轴所成的角度。

●?skew(x，y)：将x轴顺时针旋转y角度，将y轴逆时针旋转x角度。

●;

9.1.5Transform2D综合应用

图9-7所示是一个综合使用Transform2D属性制作的图形。

;

9.2Transform3D转换

;

9.2.13D坐标系和透视效果

在Transform3D转换中，我们必须首先了解CSS3中的3D坐标系，如图9-8所示。

在CSS33D坐标系中，x轴和y轴和2D坐标系一样，最左上角为(0，0)最右下角为(x，y)，根据屏幕分辨率不同，x、y的值不同；z轴垂直于屏幕，屏幕往前z轴为正，屏幕往后z轴为负。

;;

电脑显示屏是一个2D平面，图像之所以具有立体感(3D效果)，其实只是一种视觉呈现，通过透视可以实现此目的，即同一个物体离我们近，透视效果则是放大，反之，离我们远则缩小。透视可以使一个2D平面在显示过程当中呈现3D效果。

;

在CSS3中，要使用3D转换效果，必须先给元素添加透视距离，语法如下：

也可以直接给父元素设置一个透视距离，这样子元素就不必再设置透视距离。父元素设置透视距离使用perspecti