2D 3D转化和动画

day 9.10 2D、3D转化和动画
一、2D转化
属性：transform：translate（）/scale（）/rotate（）/skew（）/

1）取值：translate（x水平方向，y垂直方向）平移将元素按指定的方向平移移动,相当于定位中的relative。（可以为负值，也可以是百分比）
translateX()：水平方向移动一个对象。对像只向X轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。
translateY()：纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。
这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。所以，
transform:translate(-100px,0)实际上等于transform:translateX(-100px);
transform:translate(0,-100px)实际上等于transform:translateY(-100px)。
2）取值：scale（）缩放（没有单位，可设置一个值）让元素根据中心原点对对象进行缩放。默认值为1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。
缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。例如，scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。
scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
3）取值：rotate（水平 180deg，垂直 180deg）（可设置一个值，表示水平垂直旋转）
在平面里面旋转
transform: rotateX(60deg) 绕着x轴旋转
transform: rotateY(60deg) 绕着y轴旋转
默认是根据中心原点旋转的。注意（transform-origin改变旋转元素的旋转基点。取值：left top 左上角；left bottom 左下脚；left 左边的中间；right top 右上角；right 右边的中间；right bottom 右下角）
4）取值；skew（xdeg，ydeg）翻转，扭曲；
此知识点坐标轴有改变，垂直的是X轴，水平的是Y轴。
transform：skew（xdeg，ydeg）；
transform：skewX（）；
transform：skewY（）；
如果ydeg值为正数时，顺时针旋转，负值就是逆时针旋转。
如果xdeg的值为正数的时候，逆时针旋转，负数就是顺时针旋转
二、3D转换transform
1）3D移动：translate3d()
注意：在显示3D时，必须要给父元素添上这两个属性，不然看不到3D的效果 transform-style：preserve-3d；
perspective：value（随便取值，离看屏幕的距离，不能小于父元素的大小）
作用：使元素在这三个纬度中移动。
语法：
（1）translate3d(x,y,z)
（2）translateX(x),translateY(y),translateZ(z)
2）3D缩放：scale3d()
作用：使元素在这三个纬度中缩放。
语法：
（1）scale3d(x,y,z)
（2）scaleX(x),scaleY(y),scaleZ(z)（）z轴看不出什么效果
3）3.3D旋转:rotate3d()
作用：使元素在这三个纬度中旋转。
语法：
（1）rotate3d(x,y,z,angle)：指定需要进行旋转的坐标轴transform：rotate3d（1，1，0，45deg）；X轴和Y轴方向同时进行旋转
4）元素的基点位置，也就是观察位置。
perspective-origin: (left/center/right/value top/center/bottom/value)
perspective-origin: left -300px;
（2）rotateX(angle)，rotateY(angle) ，rotateZ(angle)
三、动画（重要）
1、创建动画
@keyframes move {
0% {}
100% {
transform: translateX(700px);
}
2、使用动画 animation
animation的取值：
1）动画名称 animation-name: move（可随便取）;
2）动画所需要时间 animation-duration: 2s;
3）延迟几秒开始运动 animation-delay: 1s;
4）运动效果 animation-timing-function: ease;
5）规定动画的次数 animation-iteration-count: 2; (1)infinite 循环播放（2）value(数字)
6）规定是否轮流反向播放动画 animation-direction: alternate-reverse; 1）reverse 反向播放（2）alternate 动画在奇数次的时候正向播放，在偶数次的时候反向播放，（3）alternate-reverse动画在奇数次的时候反向播放，在偶数次的时候正向播放（4）normal默认值，动画按正常播放
7）动画完成时，要应用的样式 animation-fill-mode: both; (1)forwards 动画完成时，停留在最后位置
8）让动画停止 animation-play-state: paused
总写：animation: name duration timing-function delay iteration-count direction fill-mode;
四、补充
1、旋转之后，在移动会有问题，如果出现需要移动又有旋转的时候，要先移动在旋转。
2、transition 和 animation的区别
相同点：都是随着时间改变元素的属性值。
不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；
而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

案例：

1.时钟案列

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: 200px;
            position: relative;
            border: 8px solid #ccc;
            box-sizing: border-box;
            border-radius: 50%;
            margin: 100px auto;
        }
        
        .line {
            width: 4px;
            height: 192px;
            position: absolute;
            background-color: #ccc;
            left: 50%;
            margin-left: -2px;
        }
        
        .line:nth-child(1) {
            transform: rotate(0deg);
        }
        
        .line:nth-child(2) {
            transform: rotate(30deg);
        }
        
        .line:nth-child(3) {
            transform: rotate(60deg);
        }
        
        .line:nth-child(4) {
            transform: rotate(90deg);
        }
        
        .line:nth-child(5) {
            transform: rotate(120deg);
        }
        
        .line:nth-child(6) {
            transform: rotate(150deg);
        }
        
        .mark {
            width: 170px;
            height: 170px;
            position: absolute;
            border-radius: 50%;
            background-color: white;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .hour {
            position: absolute;
            width: 10px;
            height: 60px;
            left: 50%;
            margin-left: -5px;
            top: 35px;
            background-color: red;
            transform-origin: center bottom;
            animation: move 43200s linear infinite;
        }
        
        .minuter {
            position: absolute;
            width: 8px;
            height: 70px;
            left: 50%;
            margin-left: -4px;
            top: 25px;
            background-color: blue;
            transform-origin: center bottom;
            animation: move 3600s infinite;
        }
        
        .second {
            position: absolute;
            width: 4px;
            height: 85px;
            left: 50%;
            top: 15px;
            margin-left: -2px;
            background-color: yellow;
            transform-origin: center bottom;
            animation: move 60s infinite steps(60);
        }
        
        .mark1 {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: aqua;
            top: 50%;
            left: 50%;
            transform: translate(-50%, 0);
        }
        
        @keyframes move {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="mark"></div>
        <div class="hour"></div>
        <div class="minuter"></div>
        <div class="second"></div>
        <div class="mark1"></div>
    </div>
</body>

</html>

2.扑克牌旋转

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

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <style>
        section {
            margin: 300px auto;
            width: 400px;
            position: relative;
        }

        img {
            width: 100px;
            position: absolute;
            top: 0;
            left: 0;
            /* transform: translate(-50%, -50%); */
            transform-origin: right bottom;
            transition: all 2s linear;
        }

        section:hover img:nth-child(1) {
            transform: rotate(60deg);
        }

        section:hover img:nth-child(2) {
            transform: rotate(120deg);
        }

        section:hover img:nth-child(3) {
            transform: rotate(180deg);
        }

        section:hover img:nth-child(4) {
            transform: rotate(240deg);
        }

        section:hover img:nth-child(5) {
            transform: rotate(300deg);
        }

        section:hover img:nth-child(6) {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <section>
        <img src="../images/pk1.png" alt="">
        <img src="../images/pk2.png" alt="">
        <img src="../images/pk1.png" alt="">
        <img src="../images/pk2.png" alt="">
        <img src="../images/pk1.png" alt="">
        <img src="../images/pk2.png" alt="">
    </section>

</body>

</html>

3.动起来的立方体

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

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <style>
        ul,
        li {
            list-style: none;
        }

        ul {
            margin: 200px auto;
            position: relative;
            width: 400px;
            height: 400px;
            transform-style: preserve-3d;
            perspective: 1000px;
            transform: rotateX(45deg) rotateY(45deg);
            animation: move 2s linear infinite alternate;
        }

        li {
            width: 300px;
            height: 300px;
            position: absolute;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            font-weight: 900;
            top: 0;
            left: 0;
            opacity: 0.5;
        }

        li:nth-child(1) {
            transform: translateZ(150px);
            background: blue;
        }

        li:nth-child(2) {
            transform: translateZ(-150px);
            background: pink;
        }

        li:nth-child(3) {
            transform: translateX(150px) rotateY(90deg);
            background: rgb(61, 177, 61);
        }

        li:nth-child(4) {
            transform: translateX(-150px) rotateY(-90deg);
            background: rgb(209, 209, 60);
        }

        li:nth-child(5) {
            transform: translateY(150px) rotateX(-90deg);
            background: purple;
        }

        li:nth-child(6) {
            transform: translateY(-150px) rotateX(90deg);
            background: rgb(80, 3, 153);
        }

        @keyframes move {
            0% {}
            100% {
                transform: rotateX(360deg) rotateY(45deg);
            }
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

</html>

4.宇宙

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

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        html,
        body {
            height: 100%;
        }

        ul {
            height: 100%;
            background: black;
            position: relative;

        }

        li {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(0deg);
            border-radius: 50%;
            border: 1px solid white;
            animation: move 4s linear infinite;
        }

        li span {
            display: block;
            width: 15px;
            height: 15px;
            background: yellow;
            border-radius: 50%;
            position: absolute;
            top: -7px;
            left: 50%;
            transform: translateX(-50%) rotate(0deg);
        }

        span i {
            display: block;
            width: 8px;
            height: 8px;
            background: honeydew;
            border-radius: 50%;
            position: absolute;
            top: -8px;

        }

        li .list {
            animation: move 6s linear infinite;
        }

        li:nth-child(1) {
            height: 350px;
            width: 350px;
        }

        li:nth-child(2) {
            height: 300px;
            width: 300px;
            animation-duration: 6s;
        }

        li:nth-child(3) {
            height: 250px;
            width: 250px;
            animation-duration: 10s;

        }

        li:nth-child(4) {
            height: 200px;
            width: 200px;
            animation-duration: 15s;
        }

        li:nth-child(5) {
            height: 150px;
            width: 150px;
            animation-duration: 21s;
        }

        li:nth-child(6) {
            height: 100px;
            width: 100px;
            animation-duration: 28s;

        }

        li:nth-child(7) {
            height: 50px;
            width: 50px;
            background: yellow;
        }

        @keyframes move {
            0% {}
            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        @keyframes move1 {
            0% {}
            100% {
                transform: translateX(-50%) rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <span></span>
        </li>
        <li>
            <span class="list">
                <i></i>
            </span>
        </li>
        <li>
            <span></span>
        </li>
        <li>
            <span></span>
        </li>
        <li>
            <span></span>
        </li>
        <li>
            <span>

            </span>
        </li>
        <li>

        </li>
    </ul>

</body>

</html>

猜你喜欢