2d-3d转换

公告

View Post

1. 2d转换（transform）

属性：

移动：translate
旋转：rotate
缩放：scale

1.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术

1.2 2d转换之移动translate

1.语法：

2.重点

例子：水平垂直居中对齐

点击查看代码

 p {
            /* 以前做法 */
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            transform: translate(-50%,-50%);
        }

效果：

1.3 2d转换之旋转rotate

1.语法
transform:rotate(度数)
2.重点

案例：
书写三角

点击查看代码

  <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }

        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
        }
    </style>

效果

1.4 2d转换中心点

语法
transform-origin: x y;
重点

案例

点击查看代码

<style>
        div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 10px;
            float: left;
        }
        
        div::before {
            content: "黑马";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.4s;
        }
        /* 鼠标经过div 里面的before 复原 */
        
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>

效果

粉盒子会覆盖空白盒子

1.5 2d 转换之缩放scale

1.语法
transform:scale(x,y)
2.注意

1.5总结

2.css3之动画（animation）

是CSS3中既有颠覆性的特征之一，可通过设置多个节点来控制一个或一组动画，常用来实现复杂的动画效果
相比于过度，动画可以实现更多变化，更多控制，连续自动播放等效果。

2.1动画的基本使用

1.先定义动画，用keyframes定义动画
动画序列概念：

语法：

2.再使用（调用）动画

点击查看代码

 @keyframes move {
            0% {
                transform: translate(0);
            }
            100% {
                transform: translateX(1100px);
            }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: springgreen;
            /* 第二步，调用动画 */
            animation-name: move;
            animation-duration: 1s;/*持续时间*/
        }

2.2 属性

细节 animation-timing-function

小熊奔跑案例：

点击查看代码

 <style>
        body {
            background-color: palegreen;
        }
        .a {
            margin-top: 300px;
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(images/bear.png) no-repeat;
            animation: b 1s steps(8) infinite , move 3s forwards;
        }

        @keyframes b {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>
        <div class="a"></div>
</body>