HTML5+CSS开发 CSS3 2D转换 CH6-1 CSS3转换_2D转换.ppt

HTML5应用开发 CSS3转换_2D转换 第*页 旋转 缩放 移动 扭曲 复杂变形 第*页 旋转通过rotate方法实现，使用格式如下： rotate(angle); 通过指定的角度参数对原元素指定一个2D rotation（2D旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg);。 第*页 缩放scale具有3种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。下面具体来看看这3种情况具体使用方法： transform:scale(2,1.5); //水平方向放大2倍，垂直方向放大1.5倍 transform:scaleX(2); //水平方向放大2倍 transform:scaleY(2); //垂直方向放大2倍 第*页 文字或图像的移动通过translate方法实现，和缩放类似，也分为3种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动），具体使用方法如下： transform:translate(100px,20px); //水平方向移动100像素，垂直方向移动20像素 transform:translateX(100px); //水平方向移动100像素 transform:translateY(20px); //垂直方向移动20像素 第*页 扭曲，有时候也称为倾斜操作，通过skew方法实现。和translate、scale一样，skew方法也具有3种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形），具体使用语法格式如下： transform:skew(30deg,10deg); //水平和垂直方向各扭曲30度、10度 transform:skewX(30deg); //水平方向扭曲30度 transform:skewY(10deg);//垂直方向扭曲10度 第*页 上一节介绍了使用transform对元素进行旋转、缩放、移动和扭曲的操作，本节介绍如何综合使用这几种方法来对一个元素使用多重变形。 本节主要通过以下两个示例来讲解多重变形操作： 【例15-5】是一个对元素先移动，然后旋转，最后缩放的示例； 【例15-6】是一个对元素先旋转，然后缩放，最后移动的示例。 transform属性用于实现元素盒子的变形效果。取值如下： rotate旋转、 skew扭曲、 scale缩放、 translate移动、 matrix矩阵变形。 1. 缩放scale transform:scale(2,1.5) ; transform-origin: top; /* 设置缩放点为正上方*/ 2. 旋转rotate transform:rotate(30deg); 3. 移动translate transform:translateX(50%); transform:translate(50%,30%); 4. 扭曲skew transform: skew(45deg,15deg); 同时应用多种变形效果 transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg); 制作自动伸缩的下划线 #nav a:after {transform: scaleX(0); /* 缩小到0 */ transform-origin: 50% 50%;} #nav a:hover:after { transform: scaleX(1); } /* 放大到1 */