CSS3属性--transform

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

属性	值
默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.transform=“rotate(7deg)”

有关transform的具体语法可以参考网站

https://www.w3school.com.cn/cssref/pr_transform.asp

下面我来讲一讲几个简单的例子

列一：放大

.img {
	transition: All 0.4s ease-in-out;
	-webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
	}

.img:hover {
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	}
<div class="img">效果：放大</div>

当鼠标移入图片或者背景等放大

列二：旋转

        .img {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }
<div class="img">效果：旋转 度数：360</div>

当鼠标移入图片或者背景等进行一次360度旋转（度数可以自己调整）

列三：在放大的同时进行旋转

.img {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

 .img:hover {
            transform: rotate(360deg) scale(1.2);
            -webkit-transform: rotate(360deg) scale(1.2);
            -moz-transform: rotate(360deg) scale(1.2);
            -o-transform: rotate(360deg) scale(1.2);
            -ms-transform: rotate(360deg) scale(1.2);
        }
<div class="img">效果：旋转放大</div>

当鼠标移入图片或者背景等旋转放大

列四：移动（向上）

.img{
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
.img:hover {
            transform: translate(0, -10px);
            -webkit-transform: translate(0, -10px);
            -moz-transform: translate(0, -10px);
            -o-transform: translate(0, -10px);
            -ms-transform: translate(0, -10px);
        }
<div class="img">效果四：<上>下左右移动 </div>

当鼠标移入图片或者背景等进行一次移动上面所写为向上