您現在的位置: 365建站網 > 365學習 > CSS3旋轉動畫(360度旋轉、旋轉放大、放大、移動) 用法和實例

CSS3旋轉動畫(360度旋轉、旋轉放大、放大、移動) 用法和實例

文章來源:365jz.com     點擊數:1769    更新時間: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">


如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (1769人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 午夜成人亚洲理论片在线观看| 厕所露脸高清近距离偷拍| 护士巨好爽好大乳| 人妻少妇(1-12)| 口工漫画里库番本| FREEFROMVIDEOS性欧美| 97大香蕉视频01020600| 欧美精品黑人粗大破除| 放荡老师淑敏办公室全集目录| 人成午夜大片免费视频77777| 男女啪啪进出阳道猛进| 日本口工漫画| 韩国三级片电影| 亚洲欧美中文字幕在线一区| 欧美日本av免费无码永久| 亚洲成av人影片在线观看| 狠狠躁天天躁中文字幕无码| 人c交zo0x| 亚洲阿v天堂在线2018| 宝贝快上来我们换个姿势| 美女动态图真人后进式| 紫夜影视网| 疯狂的交换女友第一部| 偷窥438电影| 美女被强奸| 公i公在厨房要了我在线观看| av免费不卡国产在线观看| 免费av在线看不卡| 在线一本之道高清在线观看| 大胸吃奶三级在线观看| 国产精品人成视频免费不卡| http://www.minsu123.com