【前端基础】Day 10 CSS3-2D3D

目录

1. 2D转换

1.1 二维坐标系

1.2 移动translate

1.3 旋转rotate

CSS3书写三角

1.4 中心点transform-origin

1.5 缩放scale

分页按钮

1.6 综合写法

1.7 2D转化总结

2. 动画

2.1 动画基本使用

2.2 常用属性

2.3 简写属性

大数据热点图

2.4 速度曲线细节 

steps制作打字效果

关键帧动画--奔跑的熊

3. 3D转换

3.1 三维坐标系

3.2 移动 translate3d

3.3 透视perspective

3.4 translateZ

3.5 旋转rotate3d

3.6 3D呈现 transfrom-style

两面翻转

导航栏

旋转木马

4. 浏览器私有前缀

---

 

1. 2D转换

1.1 二维坐标系

1.2 移动translate

移动盒子的位置：定位 ，盒子的外边距 ，2d转换移动

让小盒子在大盒子中居中：对小盒子指定样式 

width: 200px;
height: 200px;
top: 50%;
left: 50%

/* margin-top: 100px;
margin-left: 100px; */

transform: translate(-50%, -50%);

1.3 旋转rotate

CSS3书写三角

        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);
            transition: all .2s;
        }

        div:hover::after {
            transform: rotate(225deg);
        }

1.4 中心点transform-origin

旋转中心点、缩放中心点

            /* 跟方位名词 */
            transform-origin: left bottom;
            /* 默认是50% 50% ，等价于center center */
            transform-origin: 50px 50px;

        div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
        }

        div::after {
            content: 'pink';
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform-origin: left bottom;
            transform: rotate(90deg);
            transition: all 1s;
        }

        div:hover::after {
            transform: rotate(0deg);
        }

1.5 缩放scale

图片放大

        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }

        div img {
            transition: all .3s;
        }

        div img:hover {
            transform: scale(1.1);
        }

分页按钮

        li {
            float: left;
            width: 30px;
            height: 30px;
            margin: 10px;
            border: 1px solid pink;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            /* 鼠标经过变成小手 */
            cursor: pointer;
            transition: all .4s;
        }

        li:hover {
            transform: scale(1.2);
        }

1.6 综合写法

transform: translate(150px, 50px) rotate(180deg) scale(1.2);

1.7 2D转化总结

2. 动画

2.1 动画基本使用

keyframes 关键帧；里面的百分比要是整数，百分比是总的时间的划分。

2.2 常用属性

2.3 简写属性

        /* 1.定义动画 */
        @keyframes move {

            /* 开始状态 可以省略*/
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(1000px, 0);
            }

            50% {
                transform: translate(1000px, 500px);
            }

            75% {
                transform: translate(0, 500px);
            }

            /* 结束状态 */
            100% {
                transform: translate(0, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 2.调用动画 */
            /* 动画名称 */
            /* animation-name: move; */
            /* 持续时间 */
            /* animation-duration: 5s; */
            /* 运动曲线 默认ease */
            /* animation-timing-function: ease; */
            /* 运动何时开始 */
            /* animation-delay: 1s; */
            /* 重复次数 默认1次 */
            /* iteration 重复的  infinite 无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放 默认normal alternate即是反方向 */
            /* animation-direction: alternate; */
            /* 规定结束状态 默认backwards即回到开始状态 forwards停在结束状态 */
            /* animation-fill-mode: forwards; */

            /* 简写 linear即匀速 名称和持续时间必须写*/
            animation: move 3s linear 1s 1 alternate forwards;
        }

        div:hover {
            /* 鼠标经过div 停止动画，鼠标离开继续动画 */
            animation-play-state: paused;
        }

大数据热点图

<!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>
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(../img1.jpg) no-repeat;
            margin: 0 auto;
        }

        .city {
            position: absolute;
            top: 221px;
            right: 196px;
            color: #fff;
        }

        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50% 50%;
        }

        .city div[class^="pulse"] {
            position: absolute;
            /* 保证在父盒子里水平垂直居中 放大后会从中心向四周发散*/
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }

        .city div.pulse2 {
            animation-delay: 0.4s;
        }

        .city div.pulse3 {
            animation-delay: 0.8s;
        }

        @keyframes pulse {
            0% {}

            70% {
                /* transform: scale(3); 不用是因为会让阴影变宽*/
                width: 40px;
                height: 40px;
                opacity: 1;
            }

            100% {
                width: 70px;
                height: 70px;
                /* 透明度0 即看不见 */
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted">
                <div class="pulse1"></div>
                <div class="pulse2"></div>
                <div class="pulse3"></div>
            </div>
        </div>
    </div>
</body>

</html>

2.4 速度曲线细节 

steps制作打字效果

    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让文字一行显示 */
            white-space: nowrap;
            animation: w 4s steps(10) forwards;
        }

        @keyframes w {
            0% {
                width: 0;
            }

            100% {
                width: 200px;
            }
        }
    </style>

    <div>世纪佳缘我在这里等你</div>

关键帧动画--奔跑的熊

背景变化+步长

        body {
            background-color: #ccc;
        }

        div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 元素可以添加多个动画 , 用逗号分隔*/
            animation: bear 1s steps(8) infinite, move 3s forwards;
        }

        @keyframes bear {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translate(-50%, 0);
            }
        }

3. 3D转换

3.1 三维坐标系

3.2 移动 translate3d

            /* 都是transform 后面的Y会把X覆盖 */
            /* transform: translateX(100px);
            transform: translateY(100px); */

            /* translateZ(100px) 指向外移动100px,即朝眼睛方向移动 */
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */

            /* 3D移动简写方法 xyz不能省略 没有就写0 */
            transform: translate3d(100px, 100px, 100px);

3.3 透视perspective

3.4 translateZ

3.5 旋转rotate3d

3.6 3D呈现 transfrom-style

两面翻转

<!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: 400px;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all 1s;
            /* 让背面的紫色盒子保留立体空间 */
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
        }

        .front {
            background-color: pink;
            /* z-index: 1; */
            transform: translateZ(1px);
        }

        .back {
            background-color: purple;
            /* 让两个盒子背靠背 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">hhhh</div>
        <div class="back">aaa</div>
    </div>
</body>

</html>

导航栏

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 100px;
        }

        ul li {
            float: left;
            margin: 0 5px;
            width: 120px;
            height: 35px;
            list-style: none;
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all 1s;
        }

        .box:hover {
            transform: rotateX(90deg);
        }

        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .front {
            background-color: pink;
            z-index: 1;
            transform: translateZ(17.5px)
        }

        .bottom {
            background-color: purple;
            /* 如果有移动或者其他样式,必须先写移动 */
            /* 注意中心点的位置 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">hhh</div>
                <div class="bottom">alalala</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">hhh</div>
                <div class="bottom">alalala</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">hhh</div>
                <div class="bottom">alalala</div>
            </div>
        </li>
    </ul>
</body>

</html>

旋转木马

<!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;
        }

        section {
            position: relative;
            width: 300px;
            height: 200px;
            background: url(media/pig.jpg);
            margin: 150px auto;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
        }

        section:hover {
            animation-play-state: paused;
        }

        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/dog.jpg) no-repeat;
        }

        section div:nth-child(1) {
            transform: translateZ(300px);
        }

        section div:nth-child(2) {
            /* 先旋转后移动 */
            transform: rotateY(60deg) translateZ(300px);
        }

        section div:nth-child(3) {
            /* 先旋转后移动 */
            transform: rotateY(120deg) translateZ(300px);
        }

        section div:nth-child(4) {
            /* 先旋转后移动 */
            transform: rotateY(180deg) translateZ(300px);
        }

        section div:nth-child(5) {
            /* 先旋转后移动 */
            transform: rotateY(240deg) translateZ(300px);
        }

        section div:nth-child(6) {
            /* 先旋转后移动 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

4. 浏览器私有前缀