一、 2D转换

CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果
移动：translate
旋转：rotate
缩放：scale

1. 二维坐标系

x轴水平向右
y轴垂直向下

2. 移动

transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);

<style>
        div {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 移动盒子的位置： ①定位 ②盒子的外边距 ③2d转换移动 */
            transform: translate(20px, 20px);
        }
    </style>

在这里插入图片描述

定义转换中的移动，沿着x和y轴移动元素
translate最大优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%)
4. 对行内标签没有效果

3. 旋转

transform：rotate

 <style>
        div {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;
            /* 旋转45° */
            transform: rotate(45deg);
        }
    </style>

在这里插入图片描述

rotate里面跟度数，单位是deg，比如45deg
角度为正时，顺时针
负时，逆时针
默认旋转的中心点时元素的中心点

4. 中心点

transform-origin：x y;

 <style>
        div {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* 过度 */
            transition: all 1s;
            /* 设置中心点 */
            transform-origin: left bottom;
        }

        div:hover {
    
    
            /* 旋转360° */
            transform: rotate(360deg);
        }
    </style>

在这里插入图片描述

xy之间要用空格隔开
xy默认转换的中心点时元素的中心点（50% 50%）
还可以给xy设置像素或方位名词（top bottom left right center）

5. 缩放

控制元素大小

transform：scale(x,y)

xy之间有逗号分开
（1,1）：宽和高都放大一倍，相对于没有放大
（2,2）：宽和高放大两倍
（2）：只写一个参数，第二个参数则和第一个参数一样
（0.5,0.5）：缩小
最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

二、动画

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

1. 动画的基本使用

先定义动画

@keyframes 动画名称{
    0%{
        width:100px;
    }
    100%{
        width:200px
    }
}

动画序列

0%是动画的开始，100%是动画的完成。
在keyframes中规定某项css样式，就能创建由当前样式追歼改为新样式的动画效果
动画是是元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意定多的次数
请用%来规定变化发生的时间，或用关键词from和to，等同于0%和100%

再使用动画

 /* 调用动画 */
            animation-name: 动画名称;
            /* 持续时间 */
            animation-duration: 持续时间;

2.动画常见属性

在这里插入图片描述

三、 3D转换

特点

近大院小
物体后面遮挡不可见

1. 三维坐标系

X：右正左负
Y：下正上负
Z：外正里负

2. 3D移动

在2D的基础上多加了一个Z轴方向

注意：

translateZ沿着Z轴移动
translateZ后面的单位我们一般跟px
简写：translate3d(x,y,z)

3. 3D透视

在2D平面产生近大远小视觉立体，但是只是效果二维的

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
透视我们也称视距：视距是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，反之越小
透视的单位是像素

透视写在被观察元素的父盒子上面的
d：视距，人的眼睛到屏幕的距离
z：z轴，物体距离屏幕的距离，z越大我们看到的物体越大

4. 3D旋转

比2D多个Z，其他差不多

旋转：左手准则

左手的手拇指指向X轴的正方向
其余手指的弯曲方向就是该元素沿着X轴旋转的方向

5. 3D呈现transform-style

控制子元素是否开启三维立体环境
transform-style：flat子元素不开启3D立体空间默认的
transform-style：preserve-3d 元素开启3D立体空间
代码写给父级，但是影响的是子盒子

案例

1. 分页按钮案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
      
      
            list-style: none;
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid #1f1f;
            border-radius: 15px;
            text-align: center;
            line-height: 30px;
            margin: 15px;
            cursor: pointer;
            transition: all .4;
        }

        li:hover {
      
      
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

</html>

在这里插入图片描述

两面反转的盒子

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
      
      
            perspective: 350px;
        }

        .box {
      
      
            position: relative;
            height: 300px;
            width: 300px;
            margin: 100px auto;
            transition: all .6s;
            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: aliceblue;
            text-align: center;
            line-height: 300px;

        }

        .front {
      
      
            background-color: pink;
            z-index: 1;
            backface-visibility: hidden;
        }

        .back {
      
      
            background-color: skyblue;
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">你好呀</div>
        <div class="back">王浩文</div>
    </div>
</body>

</html>

奔跑的小熊

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
      
      
            background-color: #ccc;
        }

        div {
      
      
            position: absolute;
            width: 200px;
            height: 100px;
            margin: 100px 0;
            background: url(y小熊.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%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>

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

</html>

3D导航

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }

        ul {
      
      
            margin: 100px;
        }

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

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

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

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

            text-align: center;
        }

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

        .back {
      
      
            background-color: skyblue;
            transform: translateY(17.5px) rotateX(-90deg);

        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">你好呀</div>
                <div class="back">HI</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">你好呀</div>
                <div class="back">HI</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">你好呀</div>
                <div class="back">HI</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">你好呀</div>
                <div class="back">HI</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">你好呀</div>
                <div class="back">HI</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">你好呀</div>
                <div class="back">HI</div>
            </div>
        </li>

    </ul>
</body>

</html>

旋转木马

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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;
            margin: 150px auto;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;

        }

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

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

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

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

        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>

在这里插入图片描述

【前端学习日志】2D转换&动画&3D转换&奔跑的小熊&旋转木马

目录

一、 2D转换

1. 二维坐标系

2. 移动

3. 旋转

4. 中心点

5. 缩放

二、动画

1. 动画的基本使用

2.动画常见属性

三、 3D转换

1. 三维坐标系

2. 3D移动

3. 3D透视

4. 3D旋转

5. 3D呈现transform-style

案例

1. 分页按钮案例

两面反转的盒子

奔跑的小熊

3D导航

旋转木马

猜你喜欢

【前端学习日志】2D转换&动画&3D转换&奔跑的小熊&旋转木马

目录

一、 2D转换

1. 二维坐标系

2. 移动

3. 旋转

4. 中心点

5. 缩放

二、 动画

1. 动画的基本使用

2.动画常见属性

三、 3D转换

1. 三维坐标系

2. 3D移动

3. 3D透视

4. 3D旋转

5. 3D呈现transform-style

案例

1. 分页按钮案例

两面反转的盒子

奔跑的小熊

3D导航

旋转木马

猜你喜欢

二、动画