CSS(6)__CSS基本用法<2D属性和3D特效>

1、CSS3 2D transform 属性

l transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform的属性包括：rotate( ) 旋转/ skew( ) 倾斜/ scale( ) 缩放/ translate( ) 平移，分别还有x、y之分，比如：rotatex( ) 和 rotatey( ) ，以此类推。



l  2D transform常用的功能:



Ø rotate() 旋转，用法：transform: rotate(45deg);

共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

例：rotate(30deg)把元素顺时针旋转 30
度。

Ø 缩放 scale，scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：scaleX()和scaleY()。

用法：transform: scale(0.5) 或者transform: scale(0.5, 2);

参数表示缩放倍数；

1）一个参数时：表示水平和垂直同时缩放该倍率

2）两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

例：scale(2,4)
把宽度转换为原始尺寸的 2
倍，把高度转换为原始高度的 4
倍。

Ø 倾斜 skew，用法：transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

参数表示倾斜角度，单位deg

1）一个参数时：表示水平方向的倾斜角度；

2）两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

例：skew(30deg,20deg)围绕X
轴把元素翻转 30
度，围绕 Y 轴翻转 20
度。

X轴和Y轴角度总数加起来不能大于90deg；这个值可以为负数。

Ø translate()：用来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。在此基础上有两个扩展函数：translateX()和translateY()。

用法：transform: translate(45px)  或者 transform: translate(45px, 150px);

参数表示移动距离，单位px，

1）一个参数时：表示水平方向的移动距离；

2）两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

   例：translate(50px,100px)
把元素从左侧移动 50
像素，从顶端移动 100
像素。

Ø 简单了解matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。

Matrix是transform的一个子集，基本语法transform: matrix(a, c, b, d, tx, ty);

a, c, b, d是一个二维矩阵:

   ┌     ┐

   │ a b │

   │ c d │

   └     ┘

tx, ty就是就是基于X和Y 坐标重新定位元素。

tx, ty参数值在各个浏览器下有差异：

firefox浏览器下tx, ty除了0值之外必须只用长度单位值（“px”，“em”等）或者使用百分数。

l 基准点 transform-origin（了解）

在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

用法：transform-origin: 10px 10px;

共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

2、CSS3 3D
转换

CSS3中的3D坐标系如下图：



l CSS3 允许您使用 3D 转换来对元素进行格式化。

l transform--style属性指定嵌套元素是怎样在三维空间中呈现。语法：transform-style:flat|preserve-3d;

参数：flat     子元素将不保留其 3D 位置。

      preserve-3d     子元素将保留其 3D 位置。

3D transform中有下面这三个方法：

Ø rotateX(angle ) 旋转X轴

Ø rotateY(angle ) 旋转Y轴

Ø rotateZ(angle ) 旋转Z轴



l  3D transform常用的功能:

Ø translate3d()：移元素元素，用来指定一个3D变形移动位移量

Ø translate()：指定3Ｄ位移在Ｚ轴的位移量。

Ø scale3d()：用来缩放一个元素。

Ø scaleZ():指定Z轴的缩放向量。

Ø rotate3d()：指定元素具有一个三维旋转的角度。

Ø rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。

Ø perspective()：指定一个透视投影矩阵。

Ø matrix3d()：定义《》矩阵变形。

l perspective(length)为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大（大于立方体尺寸2倍以上）那就是站在非常远的地方看（立方体已经成了小正方形了）。

当元素没有设置perspective(length)时，所有后代元素被压缩在同一个二维平面上，不存在景深的效果。如果设置perspective(length)后，将会看到三维的效果。默认的透视视角中心在容器(是perspective所在的元素，不是他的后代元素)的中点，也就是perspective-origin: 50% 50%。当然你也可以自己设置，比如：左上角perspective-origin:
0px 0px；。

l  综合以上两点，我们可以通过几个实例，来深入了解下perspective(length);  和  transform-style:preserve-3d；

　　　（1）当设置perspective(length);不设置transform-style:preserve-3d；当元素静止时，会有立体的效果：



（2）当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：



　（3）当设置transform-style:preserve-3d；不设置perspective(length);当元素静止时，不会有立体的效果。



　（4）当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：



（5）只有当两个值都设置，不管是静止还是旋转，都会看到立体的效果。

3：动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
1、必要元素：
a、通过@keyframes指定动画序列；
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素；
2、关键属性
a、animation-name设置动画序列名称
b、animation-duration动画持续时间
c、animation-delay动画延时时间

 .animation {

            width: 30px;

            height: 30px;

            animation: change 5s infinite;

        }

        /*动画相比过渡可以控制更多细节，可以将一个动画拆成多个步骤*/

        

        @keyframes change {

            0% {

                width: 30px;

                height: 30px;

                background-color: yellow;

            }

            25% {

                width: 300px;

                background-color: blue;

            }

            50% {

                width: 30px;

                height: 300px;

                background-color: green;

            }

            100% {

                width: 300px;

                height: 300px;

                background-color: pink;

            }

        }

<body>

    <div class="animation"></div>

</body>

animation-timing-function动画执行速度，linear、ease等






e、animation-play-state动画播放状态，running(默认)、paused(暂停)等

f、animation-direction动画逆播，alternate等

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

g、animation-fill-mode动画执行完毕后状态，forwards、backwards等



h、animation-iteration-count动画执行次数，inifinate(无限次数)等，默认是1

参数值的顺序：

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

.animation {

            width: 30px;

            height: 30px;

            background-color: blue;

            /*动画名称*/

            animation-name: change;

            /*动画持续时间*/

            animation-duration: 1s;

            /*动画结束后的状态*/

            animation-fill-mode: none;

            /*无限次播放*/

            animation-iteration-count: infinite;

            /*动画延时*/

            animation-delay: 1s;

            /*动画暂停*/

            animation-play-state: running;

            /*动画反方向*/

            animation-direction: alternate;

            /*动画速度*/

            animation-timing-function: linear;

        }   

        @keyframes change {

            0% {

                width: 40px;

                height: 40px;

            }

            100% {

                width: 200px;

                height: 200px;

            }

        }

    <div class="animation"></div>

以下是我用css3D做的一个小练习的代码(供大家参考)：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
.vi{ perspective:600px;}

.cu{ width:250px; height:250px;
perspective:50% 50%;
transform-style:preserve-3d;
margin:200px auto;
animation:ait01 3s linear 20s infinite;}
@keyframes ait01{ 100%{ transform:rotate3d(1, 1, 1, 360deg)}}

.it1{ width:250px; height:250px;
position:absolute; opacity:0.8;
font-size:32px; color:#000; text-align:center; [b]line-height:250px;
border:1px #0000CC solid;
background-color:#F96; z-index: 6;
transform-origin:left;
animation:ait1 2s linear 1s both;}
@keyframes ait1{ 100%{ transform:rotateY(-90deg)}}

.it2{ width:250px; height:250px;
position:absolute; opacity:0.8;
font-size:32px; color:#000; text-align:center; line-height:250px;
border:1px #0000CC solid;
background-color:#F96; z-index: 5;
transform-origin: right;
animation:ait2 2s linear 5s both;}
@keyframes ait2{ 100%{ transform:rotateY(90deg)}}

.it3{ width:250px; height:250px;
position:absolute; opacity:0.8;
font-size:32px; color:#000; text-align:center; line-height:250px;
border:1px #0000CC solid;
background-color:#F96; z-index: 4;
transform-origin: top;
animation:ait3 2s linear 8s both;}
@keyframes ait3{ 100%{ transform:rotateX(90deg)}}

.it4{ width:250px; height:250px;
position:absolute; opacity:0.8;
font-size:32px; color:#000; text-align:center; line-height:250px;
border:1px #0000CC solid;
background-color:#F96; z-index: 3;
transform-origin: bottom;
animation:ait4 2s linear 12s both;}
@keyframes ait4{ 100%{ transform:rotateX(-90deg)}}

.it5{ width:250px; height:250px;
position:absolute; opacity:0.8;
font-size:32px; color:#000; text-align:center; line-height:250px;
border:1px #0000CC solid;
background-color:#F96; z-index: 2;
animation:ait5 2s linear 15s both;}
@keyframes ait5{ 100%{ transform:translateZ(250px)}}

.it6{ width:250px; height:250px;
position:absolute; opacity:0.8;
font-size:32px; color:#000; text-align:center; line-height:250px;
border:1px #0000CC solid;
background-color:#F96;z-index: 1;
animation:ait6 2s linear 18s both;}
@keyframes ait6{ 100%{ transform:rotateY(180deg)}}

</style>
</head>

<body>

<div class="vi">
<div class="cu">
<div class="it1">左</div>
<div class="it2">右</div>
<div class="it3">上</div>
<div class="it4">下</div>
<div class="it5">前</div>
<div class="it6">后</div>
</div>
</div>
</body>
</html>