CSS3中的transform(转换)

transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,变形,缩放等效果.

浏览器支持情况

Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。

transform转换分为2D 转换和3D转换,我们先来看看2D 转换!

2D 转换

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

2D 转换的使用

translate(位移)属性

2D的translate(位移)主要是水平,垂直方向上的位移

语法

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

translate(位移)属性使用说明

translate最大的优点就是不影响其他元素的位置
translate中的100%单位是相对于本身的宽度和高度来进行计算的
行内标签没有效果

rotate(旋转)属性

2D的rotate(旋转)指的是让元素在二维平面内顺时针旋转或者逆时针旋转.

语法

transform: rotate(60deg);

rotate(旋转)属性使用说明

rotate(角度),括号中正数为顺时针,负数为逆时针.

rotate(旋转)属性的旋转中心点

语法

transform-origin: x y;

rotate(旋转)属性的旋转中心点使用说明

参数x和y中间使用空格隔开
xy默认旋转的中心点是元素的中心(50% 50%),等价于center center
还可以给xy设置像素或者方位名词(top,bottom,left,right,center)

scale(缩放)属性

2D的scale(缩放)可以用来控制元素的放大与缩小

语法

transform: scale(x, y);

scale(缩放)属性使用说明

括号内x和y之间使用逗号进行分隔
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
transform: scale(2, 2): 宽和高都放大了二倍
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
transform:scale(0.5, 0.5): 缩小
scale 最大的优势就是可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

2D 转换综合写法

同时使用多个转换语法

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

注意:

综合写法属性的书写顺序会影响到转换的效果
当我们同时有位移和其它的属性的时候,需要将位移放到最前面

2D 转换综合案例(包含位移,旋转,缩放,斜切)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>变换</title>

    <style type="text/css">
        .box1 {
     
     
            width: 200px;
            height: 200px;
            border: 2px solid #777;
            background-color: skyblue;
            margin: 50px auto;

            transform: translate(0px, 0px);
            transition: all 1s ease;

        }

        .box1:hover {
     
     
            transform: translate(50px, 50px);
        }

        .box1:active {
     
     
            transform: translate(-50px, -50px);
        }

        .box2 {
     
     
            width: 200px;
            height: 200px;
            border: 2px solid #777;
            background-color: red;
            margin: 50px auto;
            transform: scale(1, 1);
            transition: all 2s ease;

        }

        .box2:hover {
     
     
            transform: scale(0.5, 0.5);
        }

        .box3 {
     
     
            width: 200px;
            height: 200px;
            border: 2px solid #777;
            background-color: blue;
            margin: 50px auto;

            transform: rotate(0deg);
            transition: all 1s ease;

        }

        .box3:hover {
     
     
            transform: rotate(360deg);
        }

        .box4 {
     
     
            width: 200px;
            height: 200px;
            border: 2px solid #777;
            background-color: greenyellow;
            margin: 50px auto 0;
            transform: skew(0, 0);
            transition: all 500ms ease;

        }

        .box4:hover {
     
     
            transform: skew(0deg, -45deg);
        }
    </style>

</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

</html>

2D学完以后我们插播一个重要知识点!

CSS3动画

什么是动画?

动画是CSS3中重点知识之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果

动画的基本使用

1. 定义动画
2. 调用我们定义好的动画

可能有人会觉得这不是废话嘛?

但是动画其实就是这么简单

动画语法

定义动画

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

调用我们定义好的动画

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

看吧,就是这么简单!

接下来我们再来看看动画序列

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

大家下去可以自己做一个小小的动画试一试!

比如实现一个200*200的粉色格子在浏览器屏幕中绕着四周移动一圈

动画常见属性

在这里插入图片描述

动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

动画使用说明

动画简写属性里面不包含 animation-paly-state
暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
要想动画走回来，而不是直接调回来：animation-direction: alternate
盒子动画结束后，停在结束位置：animation-fill-mode: forwards

动画速度曲线

animation-timing-function: 规定动画的速度曲线，默认是ease

在这里插入图片描述

动画案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码扫描</title>
    <style>
        .box {
     
     
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-image: url(./微信图片_20201209174637.jpg);
            position: relative;
        }

        .xian {
     
     
            width: 180px;
            height: 2px;
            margin-left: 10px;
            background-color: skyblue;
            position: absolute;
            animation-name: myfirst;
            animation-duration: 3s;
            animation-timing-function: ease;
            animation-direction: alternate;
            animation-iteration-count: infinite;
        }

        @keyframes myfirst {
     
     
            from {
     
     
                top: 0;
            }

            to {
     
     
                top: 200px;
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="xian"></div>
    </div>
</body>

</html>

好啦!知识点插播完毕,我们继续我们的转换.

3D转换

3D相信大家并不陌生,3D给我们呈现的效果是近小远大,物体被遮挡的地方不可见等特征

提起3D就不得不说到三维坐标系

x 轴：水平向右(x 轴右边是正值，左边是负值)
y 轴：垂直向下(y 轴下面是正值，上面是负值)
z 轴：垂直屏幕(往外边的是正值，往里面的是负值)

在这里插入图片描述

3D转换的使用

translate3d(位移)

3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向

transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离

注意：

x, y, z 对应的值不能省略，值不需要填写的话用 0 进行填充

语法

 transform: translate3d(x, y, z);

perspective(透视)

如果想要网页产生 3D 效果则需要透视(理解成 3D 物体投影的 2D 平面上)
实际上模仿人类的视觉位置，可视为安排一只眼睛去看
透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

perspective(透视)使用说明

透视需要写在被视察元素的父级盒子上面

注意下方图片

d：就是视距，视距就是指人的眼睛到屏幕的距离
z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大

在这里插入图片描述

语法

perspective: 1000px;

`translateZ` 与 `perspecitve` 的区别?

perspecitve 是给父级进行设置的，translateZ 给子元素进行设置不同的大小

rotate(3D旋转)

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴或者自定义轴进行旋转

语法

transform: rotateX(45deg) ：沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) ：沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) ：沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg) ：沿着自定义轴旋转 45 deg 为角度

rotate3d

transform: rotate3d(x, y, z, deg) – 沿着自定义轴旋转 deg 为角度
x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度

例如:

transform: rotate3d(1, 1, 0, 180deg) ：沿着对角线旋转 45deg
transform: rotate3d(1, 0, 0, 180deg) ：沿着 x 轴旋转 45deg

transform-style(3D呈现)

控制子元素是否开启三维立体环境
transform-style: flat; 表示子元素不开启 3D 立体空间，为默认值.
transform-style: preserve-3d; 表示子元素开启立体空间
transform-style是写给父级盒子的，但是影响的是子盒子.

3D转换综合案例(木马图)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>CSS3旋转木马</title>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
        }

        .box {
     
     
            margin: 100px auto;
            perspective: 1000px;

        }

        .stage {
     
     
            border: 1px solid black;
            margin: 200px auto;
            position: relative;
            width: 200px;
            height: 100px;
            transform-style: preserve-3d;
            animation: rot linear 10s infinite;
        }

        .stage div {
     
     
            position: absolute;
            width: 200px;
            height: 100px;
        }

        .stage div:nth-child(1) {
     
     
            background-image: url(./1.jpg);
            background-size: 100% 100%;
            transform: rotateY(0deg) translateZ(350px);
        }

        .stage div:nth-child(2) {
     
     
            background-image: url(./2.jpg);
            background-size: 100% 100%;
            transform: rotateY(60deg) translateZ(350px);
        }

        .stage div:nth-child(3) {
     
     
            background-image: url(./3.jpg);
            background-size: 100% 100%;
            transform: rotateY(120deg) translateZ(350px);
        }

        .stage div:nth-child(4) {
     
     
            background-image: url(./1.jpg);
            background-size: 100% 100%;
            transform: rotateY(180deg) translateZ(350px);
        }

        .stage div:nth-child(5) {
     
     
            background-image: url(./2.jpg);
            background-size: 100% 100%;
            transform: rotateY(240deg) translateZ(350px);
        }

        .stage div:nth-child(6) {
     
     
            background-image: url(./3.jpg);
            background-size: 100% 100%;
            transform: rotateY(300deg) translateZ(350px);
        }

        @keyframes rot {
     
     
            from {
     
     
                transform: rotateX(0deg) rotateY(0deg);
            }

            to {
     
     
                transform: rotateX(0deg) rotateY(-360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="stage">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

</html>