CSS3新增特性（二）

四、2D 转换

• 属性名：transform（可用于制作 2D 转换，也可用于制作 3D 转转换；2D 转换是平面上的转换，3D 转换是在三维立体空间的转换）
• 作用：对元素进行水平或垂直方向的 移动、缩放、旋转、拉长或拉伸 。 配合过渡和即将学习的动画知识，可以取代大量之前只能靠 Flash 才可以实现的效果。
• 属性值：多种转换方法的属性值，可以实现不同的转换效果。

1. 位移 translate()

transform 的属性值为 translate() 时，可以实现位移效果。

书写语法：

注意：

注意这里的百分比是 boeder 及以内的，不包含 magin；

正方向是向右向下，负方向是向左向上。

translate()有两个属性值时

 

  translate()只有一个属性值时

当只有一个属性值时，只移动水平方向，垂直方向不发生位移：

特殊应用：居中的制作 

还有一个特殊应用：制作居中（比之前的简单）

按照之前的写法，想让一个元素在父盒子内居中，子绝父相，子设置 left: 50%; 并且使用 margin-left 拽回自身宽度（除了 magin，其余嘉加和）的一半：

这种的需要我们自己计算，有可能会出现计算错误，所以现在可以使用 translate 位移：

2. 缩放 scale()

scale() 将元素进行缩放，分两个方向，分别是水平方向缩放和垂直方向缩放。

transform 的属性值为 scale() 时，可以实现元素缩放效果。

书写语法：

scale(x,y)

scale(n)

 scaleX()和 scaleX()

3. 旋转 rotate() 

transform 属性值设置为 rotate() 时，实现元素的旋转。

书写语法：
rotate(数字 deg)
其中，deg 为 度数 单位，正数表示顺时针旋转，负数表示逆时针旋转 。2D 的旋转只有 一个 属性值。

注意：元素旋转后，坐标轴也跟着发生转变。
因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。

先旋转后位移

先位移后旋转 

所以后续使用时要注意书写顺序，看是先旋转后位移还是先位移后旋转。

 4. 倾斜 skew()

例如将长方形倾斜为平行四边形。

transform 属性值设置为 skew() 时，实现元素的倾斜。

书写语法：
transform: skew(数字 deg, 数字 deg);
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为 0（即，只有水平方向倾斜，垂直方向不变）

skew（数字 deg）

第二个数值不写默认为 0，即只在水平方向倾斜，垂直方向不变

可以将矩形的底边当作一个参考物，底边向正方向即水平向右倾斜 30 度：

skew（数字 deg，数字 deg）

水平方向和垂直方向都倾斜

5. transform origin 属性

之前在进行元素旋转时，是以元素的中心点为原点，也叫作基准点，其实这个点的位置也是可以变化的，用下面的 transform origin 属性。

transform origin 属性

作用：设置调整元素的水平和垂直方向原点的位置。调整元素的基准点 。这对于旋转来说很重要。
属性值：包含 两个 ，中间使用 空格 分隔。

示例：

 

 6. 2D 转换 – 卡包特效案例

很多银行卡都可以放进卡包的每一层，每一张卡都可以旋转拖拽出来，将里面所有卡都旋转拖拽之后就可以找到自己想要的那张卡。

最开始只能一张卡（其实是很多张摞在一起，只能看到首页那一张），鼠标移上时所有卡以运动的形式旋转展示。

运动 —- transition 过渡

展开 —- 旋转 transform: rotate() 

旋转基准点更改 —- transform origin

首先将几张图片的宽度高度设置的相同：强制给图片设置宽高（不过有的会压缩），将图片宽高设置的与外面盒子的宽高相同。

接下来设置原始状态时，六张图片都在同一个位置，那么使用 定位 制作（子绝父相，图片针对父级盒子去进行定位）：

接下来设置鼠标移上时改变图片角度（旋转），鼠标移开时恢复原状，共有六张图片，第六张旋转最多转 360 度，每一个比前面的一个多旋转 60 度，所以每张图片的 rotate() 的值不同。

前提是首先设置旋转的基准点为盒子的右上角

基本效果已经实现，就差鼠标移上旋转时的运动效果，采用过渡属性实现一个动画：

最终完整代码：

五、3D 转换

transform 属性不止能实现 2D 转换，也可以制作 3D 立体转换效果，比普通的 x、y 轴组成的平面效果 多了一条 z 轴，如下图：

对我们而言，电脑平面是 X，Y 轴，Z 轴垂直于 XY 轴，以 XY 相交的点为原点，Z 轴从电脑平面穿出直戳我们面前。

1. 透视 perspective

电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D 效果），其实只是一种视觉呈现，通过透视可以实现此目的。（加了透视才会出现 Z 轴，才能转换为 3D）
透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。
透视特点：近大远小 。（类似于我们人眼）
注意：并非任何情况下需要透视效果，根据开发需求进行设置，如果需要展示 z 轴的变化，则设置透视效果；如果只需要 2D 效果，那么就不设置透视。

透视属性 perspective

属性名：perspective
作用：设置在 z 轴的视线焦点的观察位置，从而显示出 Z 轴，实现 3D 查看效果。
属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸 。一般设置为 1000px 及以上，便于观察物体。
注意：透视属性需要设置给 3D 变化元素的父级。因为我们是站在父级的角度去观察。

透视的演示结合下面的 3D 旋转一起演示。

2. 3D 旋转

3D 旋转比 2D 旋转更复杂，需要分别对三个方向的旋转角度值：

属性值：

注意：属性值的角度区分正负，正数 表示沿对应坐标轴 顺时针 方向旋转，负数 表示沿对应坐标轴 逆时针 方向旋转。

示例：

近大远小：图片底边距离我们较近所以看起来比较大；图片上边距离我们较远所以看起来较小。

下面使我们的站位更近一些，站的越近，观察效果越明显，设置透视  perspective: 500px;，则：

为了使效果更加明显，设置鼠标移上时透视旋转，并且设置过渡动画，这样就更有 3D 立体的效果：

沿 Y 轴旋转：

 沿 Z 轴旋转：

3. 3D 位移

与 3D 旋转，位移也分为三个方向的移动：

属性值：

属性值为 像素值或百分比 ， 正负表示位移的方向。正值向对应轴的正方向移动，负值向对应轴的负方向移动。

沿 X 轴位移：

沿 Y 轴位移：

 

沿 Z 轴位移：

图片本身大小不变。只是我们看着变小了。

之前在 2D 中学过，旋转和位移可以同时设置，但是书写顺序不同的话效果也有差异，3D 也是如此。

4. transform-style 属性

用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。
属性值：
flat：所有子元素在 2D 平面呈现
preserve-3d：保留 3D 空间
3D 元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置
transform-style: preserve-3d，来使其变成一个真正的 3D 图形。
一般来说，该属性设置给 3D 变换图形的父级元素。

5. 3D 正方体案例

一个 3D 正方体，鼠标移上时会发生 3D 旋转效果，鼠标移开恢复原样。

正方体要在一个盒子中旋转，所以要有一个容器将正方体装起来。

    


    

        

            
1
            
2
            
3
            
4
            
5
            
6
        
    

首先定位，开始之前六个正方向都在同样的位置，跟上面卡包特效案例一样（子绝父相，图片针对父级盒子去进行定位，将图片都定位在（0,0）的位置）：

正方体是使用 transform 属性的 3D 转换制作的（不要忘记给父级盒子加透视属性）

正方体基本立体结构已经出来了，接下来设置鼠标移上时旋转：

给 stage 添加过渡属性，动画效果：

现在正方体旋转起来了，但是像是在一个平面，而不是一个立体的正方体，下面就用到 transform-style 属性：transform-style: preserve-3d，来使其变成一个真正的 3D 图形。

是给内部有 3D 变化的子元素的父元素设置 transform-style: preserve-3d。

这时候看着不太像正方体：

实现距离 Z 的原点越近，看起来物体的样式会脱离原来的样式越多，所以观察时距离远一点，

调节一下透视的属性值为 perspective: 5000px;（距离越远，相差越小）。

最终完整代码：

    
    
    
    
    


    

        

            
1
            
2
            
3
            
4
            
5
            
6
        
    

6. 浏览器兼容

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。

所以一般写代码时：

 transform: rotateX(360deg) rotateY(360deg); 变成：

-webkit-transform: rotateX(360deg) rotateY(360deg);

六、动画

css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及
JavaScript。
css3 动画制作分为两步：创建动画、绑定动画。

之前学习的 transition 过渡只是一种比较简单的动画过渡效果，这里 css3 中制作的动画有更多的效果，更加灵活一些。

1. 创建动画 –@keyframes 规则

@keyframes 规则用于创建动画。（key 是关键的意思，frame 是帧的意思，keyframes 相当于添加一些关键帧）

在 @keyframes 中规定某项 CSS 样式（一种 css 样式或者一部分），就能创建由从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。

需要使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%，0% 是动画的开始，100% 是动画的完成。

@keyframes 书写方法：

@keyframes 动画名称 {
    动画过程，可以添加任意百分比处的动画细节
}

将来执行这个动画名称就可以调用这个动画过程。

利用下面示例实现两个动画：

想让这个圆从当前位置向下位移 50 像素，这时就可以自定义一个动画过程：（动画名称为 move）

从头开始的时候最好保证跟初始状态一致，就是还没有发生位移的状态，这样动画衔接就更流畅，不会出现跳帧。

也可以使用百分比定义动画细节：

使用百分比定义动画细节比使用 from 和 to 处理的更加细腻（因为中途可以增加更多点位），比如想先从起始位置到向下 150px，然后回到起始位置，然后到向上 150px，然后再回来，这样四步动画涉及到五个点位，这几步衔接起来形成一个完整的动画效果：

前面不管是使用的 from 和 to，还是使用的百分比，都只是定义了动画，动画并不能执行，要想让动画执行，需要用到下面的 animation 属性。

2. 绑定动画 –animation 属性

需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。
animation 属性用于对动画进行 捆绑。

书写语法：
div {
animation: 动画名称 过渡时间 速度曲线 延时时间 动画次数；
}
其中 必须设置动画名称和过渡时间，其他属性值可以根据需求设置。

其中的速度曲线默认值是 ease，动画次数就是动画执行几次，延时时间就是延迟多长时间再执行动画。

单一属性列表；

定义动画+绑定动画的最后完整代码：（第二个动画是一个弹性小球的效果）

3. 浏览器兼容

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

所以使用时直接不考虑 Internet Explorer 9，使用时在前面加上 -webkit- 前缀即可（类似于前面学的 trasform）。