您现在的位置: 365建站网 > 365学习 > CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例

CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例

文章来源:365jz.com     点击数:624    更新时间:2018-11-03 20:50   参与评论

CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例
Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

定义和用法

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

为了更好地理解 transform 属性,请查看这个演示。

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

语法

transform: none|transform-functions;
描述测试
none定义不进行转换。测试
matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y)定义 2D 转换。测试
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换,只是用 X 轴的值。测试
translateY(y)定义转换,只是用 Y 轴的值。测试
translateZ(z)定义 3D 转换,只是用 Z 轴的值。
scale(x,y)定义 2D 缩放转换。测试
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。测试
scaleY(y)通过设置 Y 轴的值来定义缩放转换。测试
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转,在参数中规定角度。测试
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。测试
rotateY(angle)定义沿着 Y 轴的 3D 旋转。测试
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。测试
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。测试
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。测试
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。测试
perspective(n)为 3D 转换元素定义透视视图。测试
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width:120px;
            height:120px;
            line-height:120px;
            margin: 20px;
            background-color: #5cb85c;
            float: left;
            font-size: 12px;
            text-align: center;
            color:orangered;
        }
        /*效果一:360°旋转 修改rotate(旋转度数)*/
        .img1 {
            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;
        }
        .img1:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }
        /*效果二:放大 修改scale(放大的值)*/
        .img2 {
            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;
        }
        .img2: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);
        }
       /*效果三:旋转放大 修改rotate(旋转度数) scale(放大值)*/
        .img3 {
            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;
        }
        .img3: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);
        }
        /*效果四:上下左右移动 修改translate(x轴,y轴)*/
        .img4 {
            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;
        }
        .img4: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);
        }
    </style>
</head>
<body>
<div>效果一:360°旋转 </div>
<div>效果二:放大</div>
<div>效果三:旋转放大</div>
<div>效果四:上下左右移动 </div>
</body>
</html>


CSS3实现图片循环旋转

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片循环旋转</title>
<style>
*{margin: 0; padding: 0;}
.ta_c{text-align: center;
margin-top: 100px;}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
.img{border-radius: 250px;}
</style>
</head>
<body>
<div class="ta_c">
<img class="Rotation img" src="img/01.png" width="500" height="500"/>
</div>
</body>
</html>


HTML实现图片360度循环旋转

效果图

11111.gif

//css代码
.header{
    -webkit-animation:rotateImg 1s linear infinite;
    width: 80px ;
    height: 80px;
    border: 1px solid #ccc;
    vertical-align: middle;
}
@keyframes rotateImg {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}
@-webkit-keyframes rotateImg {
    0%{-webkit-transform : rotate(0deg);}
  100%{-webkit-transform : rotate(360deg);}
}
//html代码
<img class="header" src="me.png">


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (624人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------