CSS3新特性-2

CSS苦逼学习日记（13）

2D转换之 transform

如何让一个元素垂直居中呢？
除了之前的使用了margin:0 auto;和行高等于盒子高度或者或者调内外边距之外还有什么更好的方法呢？当盒子高度变化之后如何不改代码也让一个盒子垂直居中呢？ 下面就是transform中的translate的使用：

1. translate的使用

使用方法 transform: translate(x,y)

定义2D转换中的移动，向右和向下分别为x和y的正半轴

1st：translate最大的优点:不会影响到其他盒子，当想让一个图片或者盒子放大的时候，因为此盒子的变大或者变小，如果是浮动则可能会把本在一行的盒子挤到下一行去，但是使用translate就不会把其他盒子挤下去，而是把重合的地方压在下面。

2nd：translate可以使用百分比，但是百分比是相对于自身高度和宽度大小的，translate（50%，50%）（向x，y轴移动盒子本身宽和高的50%）

3rd：translate对行内标签没有效果（不可以给行内元素添加此属性）

        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            transform: translate(-50%,-50%);
        }
        span {
            /* transform对于行内元素是无效的 */
            transform: translate(300px,300px);
        }

当中的：

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);

此四段代码即为垂直居中的核心代码，不论父盒子高度和宽度或者子盒子高和宽怎么变，都是垂直居中的，记住要给父盒子加position:relative属性以防子盒子跑走。

---

2.rotate的使用

可以使盒子沿着中心轴旋转。

使用方法：
transform: rotate(),括号内只能加例如180deg等数值，单位必须是deg，180deg相当于数学上的180°。
如果自定义的数值是正值，则是顺时针旋转，
如果自定义数值是负值，则是逆时针旋转。

注意：当旋转之后，也不会影响其他盒子的位置和大小，重合的部分也只是会压住其他盒子。

---

3.scaled

1.里面跟的是数字不跟单位 就是倍数的意思 1 就是1倍 2就是2倍
transform: scale(x,y)
2.修改了宽度为原来的2倍而高度不变
transform: scale(2,1);
3.等比例缩放同时修改宽度和高度有简单的写法：
transform: scale(2);
4.我们可以进行缩小 小于1就是缩小
transform: scale(0.5);
5.scale的 优势之处： 不会影响其他盒子。而且可以设置缩放的中心点！！important
transform: scale(2);
6.可以设置缩放中心点 （和旋转一样设置）

原来：

使用scaled放大之后：

123456 的位置没有发生改变。

---

4.2D位移设置中心旋转换点：

transform-origin: 50% 50%;是默认的中心点
可以跟方位名词： transform-origin: left top; center right bottom
可以是像素px: transform-origin: 50px 50px;
可以是百分比： transform-origin: 25% 0;

---

5.transform的综合写法：

transform:translate() rotate() rotate() scale();

注意：

1.同时使用多个转换，其默认格式为 transform:translate() rotate() rotate() scale()等;

2.其顺序会影响转换的效果（先旋转会改变坐标轴方向，但有时我们需要先旋转再移动，例如旋转木马的例子）

3.当我们同时又位移和其他属性的时候，记得要将位移放在最前面

---

2.CSS3动画的基本使用:

动画使用的先后：
先定义动画，再使用动画。

---

定义动画：

@keyframes 定义动画（给此动画取个名字）如-> move {
            0% {
                transform: translate(0px,0px);
            }
            100% {
                transform: translate(1000px);
            }
        }

我们也可以这样写：

@keyframes 定义动画（给此动画取个名字）如-> move {
            0% {
                transform: translate(0px,0px);
            }
            50% {
                transform: translate(500px);
            }
            100% {
            transform:translate(1000px)
            }
        }

注意：
1.里面可以做多个状态的变化 keyframe(关键帧)
2.里面的百分比要是整数
3.里面的百分比也是总时间的划分

再使用动画:

    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 动画名称: */
        animation-name: move;
        animation-duration: 2s;
    }

此代码的意思是：把盒子的大小在刚好过了2s的情况下从width和height都为200px的情况变为width和height都变成1000px

内容细解：

animation-name: move;
animation-duration: 2s;

animation-name是告诉浏览器我们使用的动画的名字是什么。

animation-durantion是告诉浏览器此动画需要使用的总时间是多长。定义动画的百分比为多少，则花费的时间也为百分比*animation-duration

动画其他的常见属性：

属性	值	解释
animation-time-function	ease,ease-in,ease-out,ease-in-out,linear(匀速)	动画播放的时间曲线
animation-iteration	1或2或3等次数，	动画循环的次数，当设定值为 infinite时为无限循环
animation-delay	time(1s或10s等)	延迟多少秒后再播放动画
animation-direction	normal ，alternate	是否反方向播放？ 默认是normal，要想反方向播放就写 alternate（到达终点之后沿路返回）
animation-play-state	paused	经常和鼠标经过配合：鼠标经过div时，让这个div停止动画，鼠标离开动画继续
animation-fill-mode	backwards，forwards	（前提是不使用无限循环）动画结束后，默认是backwards回到起始状态 我们可以让它停留在结束动画的状态，用forwards

3.动画属性的简写：

div {
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态 ;

        动画简写：animation: name duration timing-function delay iteration-count direction fill-mode; 
        
        前面两个属性 name duration 一定要写 
        
         time-function delay iteration-count等可以不写 
    }

---

4.3D动画的简单制作：

最重要的一点：给需要设置3D效果的盒子的父盒子设置：

transform-style: preserve-3d;

的属性

视距：相当于人眼睛到照相机的距离：

使用：perspective: xxxpx;

当数值越大，则表明人眼睛到照相机的距离越近，则越靠近屏幕的物体就越大，越远的就越远，促进3D效果更加明显.

案例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
        }
        @keyframes rotate {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        section {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            transition: all 5s;
            transform-style: preserve-3d;
            animation: rotate 6s linear infinite;
        }
        section:hover {
            animation-play-state: paused;
        }

        section div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: blue url() no-repeat;
        }
        section div:nth-child(1) {
            transform: rotateY(0deg) translateZ(400px);
        }
        section div:nth-child(2) {
            transform: rotateY(60deg)  translateZ(400px);
        }
        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(400px);
        }
        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(400px);
        }
        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(400px);
        }
        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(400px);
        }
        section .aaa img {
            width: 100%;
            height:100%
            background-color: red;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="aaa"><img src="" alt=""></div>
    </section>
</body>

</html>

这里就是先rotate(旋转)了之后，再设置的translateZ值
效果如下：