CSS3形變——transform與transform-origin畫時鍾

css3屬性transform和transform-origin“畫”時鍾

效果圖

　　前言

八哥：哈嘍，大家好！好攻城獅就是我就是你們的小八，歡迎收聽你的月亮。。。哦不，是很高興與你們共享知識，誒呀呀，現在夜黑風髙好做事呀，嘿~嘿~嘿，你們懂的！哈哈^_^  哎喲。喲。喲！九兒你輕點。。。

小九：大晚上的不睡覺發什么騷呢！

八哥捂着耳朵：你看看你看看，不單純了吧！本着學無止境，不分時段，我這是跟學友們探討技術上的交流呢！

小九：還技術交流，我看你耍流氓吧！哼！今晚罰你睡沙發。。。

八哥：額。。。

一、廢話不多說，下面先聊聊變形

　　變形分為2D和3D變形。今天主要講，如果通過指定的角度參數對原元素指定一個2D rotation（即2D旋轉），這個時候需要用到transform-origin屬性。假設我直接對對象元素進行設置rotate（45deg）,它只會以元素本身中心點旋轉45度，達不到我們設計時鍾時元素（刻線、時針）圍繞圓心轉。那么這個時候，重點來了！使用transform-origin來對元素進行基點位置改變，使元素基點不在是中心位置，以達到你需要的基點位置。

二、關於元素基點的那些事

　　下面有三種方法幫你層層理解到位就是啦！

　　（1）transform-origin他有自己的語法，多數是拿來配合transform：rotate（）用。語法表示：transform-origin(X,Y)，它是用來設置元素的運動的基點（參照點）。默認點是元素的中心點。其中X和Y這兩值可以是百分值,em,px，其中X也可以是字符參數值left,center,right；Y和X一樣除了百分值外還可以設置字符值top,center,bottom

transform-origin接受兩個參數，它們可以是百分比，em，px等具體的值，也可以是left,center,right，或者 top,center,bottom等描述性參數 ;
top left | left top 等價於 0 0；
top | top center | center top 等價於 50% 0
right top | top right 等價於 100% 0
left | left center | center left 等價於 0 50%
center | center center 等價於 50% 50%（默認值）
right | right center | center right 等價於 100% 50%
bottom left | left bottom 等價於 0 100%
bottom | bottom center | center bottom 等價於 50% 100%
bottom right | right bottom 等價於 100% 100%

　　其中，left,center right是水平方向取值，對應的百分值為left=0%;center=50%;right=100%而top,center,bottom是垂直方向取值left=0%;center=50%;right=100%。

拿圖說話：請看大屏幕（針對以上亂七八糟的數值進行小結）

<html>
<head>
<title>transform-origin屬性</title>
<style>
.testBox{
    position: relative;
    left:20px;
    width: 100px;
    height:100px;
    border:1px solid black;
}
.subBox{
    position: absolute;
    top:25px;
    left:25px;
    width: 50px;
    height:50px;
    background-color: blue;
    /*默認值*/
    transform-origin:50% 50%;
    /*左上角*/
    /*transform-origin:top left;*/
    /*右上角*/
    /*transform-origin:right top;*/
    /*右下角*/
    /*transform-origin:right bottom;*/
    /*左下角*/
    /*transform-origin:bottom left;*/
    transform:rotate(45deg);
}    
</style>   
</head>
<body>
    <div class="testBox">
      <div class="subBox"></div>
    </div>
</body>
</html>

效果圖：第一張不變；第二張以元素中心點為基點旋轉；第三左上角基點旋轉，第四右下角基點旋轉。（通常以百分比、字符值作為基點參數）

 

（2）當基點設在元素之外時，參數值單位可以用em或者px，下面以px為例，如圖所示：

transform-origin基點的數值我是以px為例的，我在接下去的畫時針的實例中也會真正使用到。

　　假設時鍾的刻線寬高分別為4px、10px，那么好，在沒有使用transform-origin改變元素基點之前，元素的基點在元素的中心位置，即（2px,5px）；為什么是這兩個數呢？視線移到第一種方法上的紅色標記，默認值，也就是——transform-origin：center center或者transform-origin：50% 50%；再把視線回歸分析圖，2px和5px的取值是從圖上的x和y軸的（0,0）點到“基點”也就是元素的左上角到“基點”的x軸和y軸距離，搞懂了這個就好辦啦！如果我想把元素基點移到圓的中點位置呢？這個時候我怎么獲取transform-origin的值？同理的，我只需要獲得新基點的“位置”就行了，元素左上角到圓心的x、y，即（2px，150px），兄弟姐妹們，懂了吧！

【這時候小九就問啦：你懂得了那個叫什么新基點有什么用呢？

八哥敲她小腦袋道：小笨蛋，叫你不好好聽我說，我說了畫時鍾嘛！你懂得了畫一條刻線，在配合transform：rorate（）角度旋轉后，時鍾的刻線不都出來咯！】

（3）不懂就要問是對滴！但在問之前，其實，度娘什么的才是第一選擇！

　　如果還是覺得抽象不懂的學友，請上w3cSchool或者菜鳥教程等等查閱資料喲！

　　如果這樣了還是不清楚的，我只能祝你幸運了喲！嘿嘿。。。

三、實例（不要問我為甚老是喜歡“畫”鍾，上篇也是畫鍾，煩不煩哈！——嘿嘿，就愛畫啦，你打我啊！O(∩_∩)O哈哈~）

　　首先呢，來簡單介紹一下用到的知識:引入jQuery、腳本化文檔（通俗就是js控制html）、腳本化css（同理在js里控制css樣式）、最關鍵transform-origin、還有setInterval循環函數。

1.隨便給個div元素。設寬高各為300px，把它變成圓，然后在里邊添加刻線、數字、時針、分鍾、秒針等。

2.學以致用，關鍵點還是獲取到目標元素的基點，以及配合transform的rotate屬性旋轉，什么時分秒針、數字都是小意思！

3.大家都是正常人，我說多了，你們把我當智障怎么辦喲O(∩_∩)O哈哈哈~嚴重嚴重啦！

4.關鍵不是這個很low的時鍾，而是transform-origin的理解。好啦！時鍾代碼在此，想要不~~官人我要。。。。。。

HTML：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title> mouseenter </title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="clock">
        <div id="clockBox" class="clockBox">
            <div id="hour" class="hour"></div>
            <div id="minute" class="minute"></div>
            <div id="second" class="second"></div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

CSS：

html,body{
    width: 100%;
    height:100%;
    margin: 0px;
    padding: 0px;
}
.clock{
    width: 400px;
    height:400px;
    border:1px solid black;
    position: relative;
    top: 50px;
    left: 50px;
}
.clockBox{
    position: relative;
    width: 300px;
    height:300px;
    border:4px solid black;
    border-radius:50%;
    margin: 50px;
}
.lattice{
    position:absolute;
    width: 4px;
    height:10px;
    background-color:#000;
    left: 148px;
    -webkit-transform-origin:2px 150px;
    /*transform:rotate(180deg);*/
}
.latticeLG{
    height: 20px;
}
.mun{
    position: absolute;
    width:20px;
    height:20px;
    left:140px;
    top:20px;
    font-family:"微軟雅黑";
    text-align: center;
    -webkit-transform-origin:10px 130px;
}
.hour{
    position: absolute;
    width: 10px;
    height: 100px;
    border-radius: 6px;
    background-color:#000;
    left: 145px;
    top:60px;
    -webkit-transform-origin:5px 90px;
    /*transform:rotate(180deg);*/
}
.minute{
    position: absolute;
    width: 6px;
    height: 120px;
    border-radius: 6px;
    background-color:#000;
    left: 147px;
    top:45px;
    -webkit-transform-origin:3px 105px;
    /*transform:rotate(180deg);*/
}
.second{
    position: absolute;
    width: 4px;
    height: 130px;
    border-radius: 6px;
    background-color:red;
    left: 148px;
    top:35px;
    -webkit-transform-origin:2px 115px;
    /*transform:rotate(180deg);*/
}

 

JS代碼：

jQuery(function($){
    var html = '<div class="lattice"></div>';
    //刻線
    for(var i=0; i<60;i++){
        var $html = $(html);
        if(!(i%5)){
            $html.addClass("latticeLG");
        }
        $html.css('-webkit-transform','rotate('+i*6+'deg)');
        $("#clockBox").append($html);
    }
    
    //數字
    for (var i = 1; i < 13; i++) {
        var $munHtml = $('<div class="mun"><div>'+i+'</div></div>');
        $munHtml.css('-webkit-transform','rotate('+i*30+'deg)');
        $munHtml.find("div").css('-webkit-transform','rotate('+(-i*30)+'deg)');
        $("#clockBox").append($munHtml);

    };
    //時分秒針
    function setTime(){
        var date = new Date;
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        $("#hour").css('-webkit-transform','rotate('+(hour/12*360+ (minute/60/12*360))+'deg)');
        $("#minute").css('-webkit-transform','rotate('+(minute/60*360+ (second/60/60*360))+'deg)');
        $("#second").css('-webkit-transform','rotate('+second/60*360+'deg)');
    }
    setInterval(setTime,1000);//一秒循環一次
});

　　總結，其實transform還有其他屬性值，在css3中也值得我們去探討，例如matrix、translate、scale、rotate、skew等，但是呢，項目中若遇到的話就小解怡情，深入傷身哈！阿彌陀佛！！切記切記呀！特么的~~寫着寫着為什么總是能令人想到其他方面去呢！它奶奶的。。。嘿嘿嘿嘿。。（撫下巴）

　　引用到知識的小伙伴網站——http://blog.sina.com.cn/s/blog_780a942701014xl8.html

本文為原創，因此轉載請保留原出處——本文地址：http://www.cnblogs.com/beyond-utf-8/p/css3.html