3種方法（div法、css法、js法）制作html的旋轉太極圖

.說明：

推薦指數：★★★★

通過動畫太極的方法，增加學習興趣，對html的結構和css、JavaScript、div的認識和了解會逐步深入。

2.復習html的結構框架

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>html結構基本框架代碼</title>
    </head>
    
    <body>
    </body>

</html>

3 div法

3.1 代碼：復制下面的代碼，命名為：div法.html，用瀏覽器打開即可。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>div法的旋轉的太極圖</title>
</head>
<!--單獨style，不在head和body，只是在body內有一個div容器-->
<style>
div{
    width: 0;
    /*這個高就是黑色圓形和白色圓形的直徑和*/
    height: 200px;
    /*黑色太極部分的圈帶動的黑色的陰影*/
    border-left: 100px solid black;
    /*白色太極部分的圈帶動的白色的陰影*/
    border-right: 100px solid #fff;
    box-shadow: 0 0 15px rgba(0,0,0,.5);
    /*旋轉半徑100*/
    border-radius: 100px;
    /*旋轉速度定義,越小越快*/
    -webkit-animation:rotation 2.5s linear infinite;
}
div:before{
    content: "";
    position: absolute;
    height: 100px;

    z-index: 1;
    border-radius: 100px;
    /*白色的小半圓*/
    border-left: 50px solid #fff;
    border-right: 50px solid #fff;
    left: -50px;
    /*黑色的小半圓，因為轉動拖動黑色陰影*/
    box-shadow: 0 100px 0 black;
}
div:after{
    content: "";
    position: absolute;
    /*height是太極里面小圓圈的高30，要和border-radius30一致，才畫出圓*/
    height: 30px;
    /*這個是顯示小圓圈的,0就是不顯示*/
    z-index: 1;
    border-radius: 30px;
    border-left: 15px solid;
    border-right: 15px solid;
    /*top和left，決定小圓圈白色和黑色的位置*/
    top: 40px;
    left: -15px;
    /*黑色太極部分里面的小白色圓圈*/
    box-shadow: 0 100px 0 white;
}
/*旋轉角度函數定義*/
@-webkit-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);}
    100% {-webkit-transform:rotate(-360deg);}
}
</style>

<body>
    <div></div>
</body>

</html>

3.2 效果圖

4 css法

4.1 css法.html代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css法的旋轉的太極圖</title>
    <!--css導入和js導入不一樣，請注意-->
    <!--script-- src="./tj.css"></!--script-->
    <link rel="stylesheet" type="text/css" href="./tj.css">
</head>
<body>
    <div class="tj"></div>
    
</body>
</html>

4.2 tj.css代碼：注意與上面兩個文件放在同一個文件夾下


.tj{
    width: 100px;
    height: 200px;
    border: solid black;
    border-width: 2px 100px 2px 2px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    /*run是動起來的函數，在最后面設置和定義*/
    animation: run 2s linear infinite;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.tj:before{
    content: " ";
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: black;
    /*36=(100-28)/2得到的，是小白色圓圈的半徑*/
    border: 36px #ffffff solid;
    border-radius: 50%;
    top: 0;
    left: 50%;
}
.tj:after{
    content: " ";
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: #ffffff;
    /*36=(100-28)/2得到的，是小黑色圓圈的半徑*/
    border: 36px black solid;
    border-radius: 50%;
    top: 50%;
    left: 50%;
}
/*run動起來的函數定義*/
@keyframes run{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

4.3 效果圖

5 js法=就是JavaScript法

5.1 js法.html代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>js法的旋轉的太極圖</title>
        <!--注意下面2鐘都可以，主要是瀏覽器都支持html5-->
        <!--script-- src="script.js" type="text/javascript"></!--script-->
        <script src="./script.js"></script>
        <!--簡單的css內容就這樣寫在下面，如果css比較復雜，則需要外部導入-->
        <style type="text/css">
            canvas{
                display: block;
                margin: 20px auto;
                
            }
        </style>
    </head>

    <body onload="main()">
        <!--畫布大小,畫布框的線顏色藍色設置，solid blue是指畫布外框的顏色為藍色-->
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>
    </body>

</html>

5.2 script.js代碼：與上面html放在同一個文件夾下

//注意到沒有null=0，效果是一樣的
var angle = 0;
//var canvas = null;
//var ctx = null;
var canvas = 0;
var ctx = 0;

function main()
{
    window.setInterval(function()
    {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        // 畫布大小有關
        ctx.clearRect(0, 0, 300, 300);
        // 線條寬度0~10，均可
        ctx.lineWidth = 0;
        ctx.save();
        // 旋轉的中心點的坐標位置150,150
        ctx.translate(150,150);
        ctx.rotate(angle);
        // 太極黑色部分
        ctx.fillStyle = "black";
        ctx.beginPath();
        // 注意幾個函數數值的關系，120,60，半徑和坐標的關系，如果要縮小半徑，那么坐標也需要調整
        ctx.arc(0, 0, 120, 0, Math.PI, true);
        ctx.fill();
        ctx.closePath();
        // 太極白色部分
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.arc(0, 0, 120, 0, Math.PI, false);
        ctx.fill();
        ctx.closePath();
        // 太極黑色部分
        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.arc(60, -0.6, 60, 0, Math.PI, false);
        ctx.fill();
        ctx.closePath();
        // 太極白色部分
        ctx.fillStyle = "white";
        ctx.lineWidth = 0;
        ctx.beginPath();
        ctx.arc(-60, 0, 60, 0, Math.PI, true);
        ctx.fill();
        ctx.closePath();
        // 白色太極部分里面的小黑色圓圈
        ctx.fillStyle = "black";
        ctx.beginPath();
        //畫圓的函數：-145,0是坐標，15是半徑，2*Math.PI是一個圓，一個π是半圓
        ctx.arc(-60, 0, 15, 0, 2*Math.PI, false);
        ctx.fill();
        ctx.closePath();
        // 黑色太極部分里面的小白色圓圈
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.arc(60, 0, 15, 0, 2*Math.PI, false);
        ctx.fill();
        ctx.closePath();
        // 旋轉角度一次增加多少
        ctx.restore();
        angle += 0.02;
    // 50代表轉速，越大越慢，越小越快
    },1);
}

5.3 效果圖

6 值得收藏，慢慢回味。

SS3實現球體旋轉

本教程簡述如何用CSS3實現旋轉的球體

效果如下圖所示，球體沿著中間的軸旋轉：

要理解的知識點

1 三維空間的透視屬性

css屬性：perspective

perspective 屬性有兩個值，none 和自己定義的具體像素，例如1000px。

注意：當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身，所以我們可以把這個屬性理解為照相機和被拍攝物體的距離，CSS3 3D 變換中透視的透視點是在瀏覽器的前方，當我們設置它的值為具體數值的時候，其子元素就會具有近大遠小，近實遠虛的效果。

目前這個屬性對瀏覽器支持還不算太好，只有Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。

2 css屬性transform-style

這個屬性瀏覽器支持情況良好，除了ie瀏覽器，其他瀏覽器都支持。Firefox 支持 transform-style 屬性，而Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 屬性。

transform-style屬性是設置其子元素是否保留3d位置的。

它也是有兩個值：

1 默認值是flat,表示其子元素不保留3d位置。

2另一個值是preserve-3d，當元素設置了這個值的時候，其子元素就相當于進入了三維空間。

如圖所示：

x軸表示橫向的軸

y軸表示縱向的軸

z軸其實就是我們的視線，是與我們直視的水平面垂直的

如果一個元素沿著x軸旋轉，可以想象成奧運單桿運動員那樣運動~

如果一個元素沿著y軸旋轉，可以想象成公園旋轉木馬沿著中間的柱子繞圈圈~

而元素沿著z軸旋轉的話更好理解了，可以想象成視線正前方，有一個風扇，風扇的扇葉就是沿著z軸旋轉的~

關于3d的一些相關屬性，介紹完畢，那么開始案例制作

結構和樣式

（代碼如下，具體屬性都添加了對應注釋）

效果如圖：

此時我們給球體整體則.ball_in元素沿著x軸向前傾斜和沿著z軸向左傾斜一定角度，則立體感更強。

代碼：

效果如圖：

利用偽元素給球體添加中心軸，代碼如下：

效果如圖：

最后步驟，給每個li添加顏色和整個球體添加旋轉的動畫：

整個球體添加旋轉的動畫代碼如下：

最終效果如圖：

（繞著y軸轉圈圈）

是否覺得五顏六色的球體沒意思？

其實還可以改裝一下，搞點小意思，例如球體不需要那么多個面，然后把剩余的面換成好看的圖片,改裝后效果如圖：

有沒有一種cd在三維空間旋轉的感覺？

又或者我們再改裝一下，效果如下圖：

好了，最后奉上案例源碼，有興趣的朋友可以自行下載。http://bbs.520it.com/ueditor/php/upload/file/20161109/1478670247341112.zip

想要了解小碼哥網頁ui學院更多課程，可以到此鏈接：http://www.520it.com/special/ui

還有，小碼哥論壇bbs.520it.com歡迎您隨時來逛逛

們都有在網頁上見過一些交互性的效果，比如用鼠標滑向圖標或是按鈕的時候，圖標會自動旋轉一周，這就是CSS3旋轉效果。在CSS3中有個常見的transform應用，transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。本文主要側重講解CSS3的平面旋轉（2D）方法和立體旋轉（3D）方法。不過既然提起transform，還是先普及一下transform屬性的基本知識：

在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

1、旋轉rotate() ：通過指定的角度參數對原元素指定一個2D rotation（2D 旋轉），angle是指旋轉角度，如果設置的值為正數表示順時針旋轉，負數則表示逆時針旋轉。如：transform:rotate(30deg)。

2、扭曲skew( [, ]) ：X軸Y軸上的skew transformation（斜切變換）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數，默認為0deg。

3、縮放scale([, ])：提供執行[sx,sy]縮放矢量的兩個參數指定一個2D scale（2D縮放）。如果第二個參數未提供，則取與第一個參數一樣的值。scale(X,Y)是用于對元素進行縮放，可以通過transform-origin對元素的基點進行設置，同樣基點在元素中心位置；基中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數，而Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。并以X為準。如：transform:scale(2,1.5)。

4、移動translate([, ]) ：通過矢量[tx, ty]指定一個2D translation，tx 是第一個過渡值參數，ty 是第二個過渡值參數選項。如果未被提供，則ty以 0 作為其值。也就是translate(x,y),它表示對象進行平移，按照設定的x,y參數值,當值為負數時，反方向移動物體，其基點默認為元素中心點，也可以根據transform-origin進行改變基點。如transform:translate(100px,20px)。

5、矩陣變形matrix(, , , , , ) ：以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣。

CSS3旋轉rotate()方法

在CSS3中，我們可以使用rotate()方法來將元素相對中心原點進行旋轉。這里的旋轉是二維的，不涉及三維空間的操作。

語法：

transform：rotate(度數);

說明：

度數指的是元素相對中心原點進行旋轉的度數，單位為deg。其中，deg是degree（度數）的縮寫。如果度數為正，則表示元素相對原點中心順時針旋轉；如果度數為負，則表示元素相對原點中心進行逆時針旋轉。

舉例：

效果如下：

分析：

這里虛線框為原始位置，藍色背景盒子為順時針旋轉30度后的效果。

CSS3實現3D旋轉

用CSS3制作3D旋轉圖像，效果很漂亮，3D旋轉的特別之處就是支持陰影旋轉和兼容響應式網頁設計，使得整體場景非常有感覺。

先看一個簡單的3D旋轉效果例子：

正面：鼠標移上去就開始旋轉

旋轉中：這是旋轉至背面的效果，以旋轉并帶半透明漸變的方式顯示。

背面：旋轉后，為圖像添加一些文字介紹元素，充實這個元素。

HTML代碼

<divclass="photo-container"><divclass="rotate-box"><imgsrc="winwall.jpg"/><divclass="text"><h2>這是一個標題</h2><p>這是一段圖片相關的簡介內容。。</p></div></div></div>

CSS代碼

.photo-container{perspective:1200px;/*透視視圖*/width:45%;float:left;}.rotate-box{position:relative;transform-style:preserve-3d;/*3D轉換*/transition:1sease;/*轉換效果持續1秒*/margin:10%;}.rotate-boximg{width:100%;height:auto;}

背面文本樣式，透明背景，并設置默認為反轉180度，其次要將圖像置于圖像的背面，所以這里我們利用z軸來控制，CSS代碼如下：

.text{position:absolute;top:0;width:100%;height:100%;transform:rotateY(180deg)translateZ(1px);/*反轉180度并設置z軸讓其置于圖片背面*/color:#666;text-align:center;opacity:.06;background:rgba(255,255,255,.9);transition:1sopacity;}

使用Hover來觸發動畫

.photo-container:hover.rotate-box{transform:rotateY(180deg);}.photo-container:hover.text{opacity:1}

通過偽元素（:after）給圖像添加一個透視陰影，使整體更有3D立體感覺。

.rotate-box:after{content:'';display:block;width:100%;height:7vw;/*vw是移動設計備窗體單位*/transform:rotateX(90deg);background-image:radial-gradient(ellipseclosest-side,rgba(0,0,0,0.05)0%,rgba(0,0,0,0)100%);/*radial-gradient是徑向漸變*/}

CSS3實現3D立方體旋轉效果

使用方法：

1、調用CSS樣式：

2、添加HTML代碼：

將......之間的html和js代碼；放在<body></body>之間。

HTML代碼：

<divclass="wrap"><divclass="box1box">1</div><divclass="box2box">2</div><divclass="box3box">3</div><divclass="box4box">4</div><divclass="box5box">5</div><divclass="box6box">6</div></div>

CSS 3代碼：

*{margin:0;padding:0;}html,body{height:100%;background:black;}.wrap{height:100%;position:relative;-webkit-transform-style:preserve-3d;-webkit-perspective:0px;-moz-transform-style:preserve-3d;-moz-perspective:0px;-webkit-animation:mydhua5seaseinfinite;-moz-animation:mydhua5seaseinfinite;}.box{width:200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px00-100px;line-height:200px;text-align:center;font-size:48px;color:white;}.box1{-webkit-transform:rotatey(90deg)translatez(-100px);-moz-transform:rotatey(90deg)translatez(-100px);background:rgba(128,0,128,.5);}.box2{-webkit-transform:rotatey(90deg)translatez(100px);-moz-transform:rotatey(90deg)translatez(100px);background:rgba(255,0,255,.5);}.box3{-webkit-transform:rotatex(90deg)translatez(100px);-moz-transform:rotatex(90deg)translatez(100px);background:rgba(255,153,204,.5);}.box4{-webkit-transform:rotatex(90deg)translatez(-100px);-moz-transform:rotatex(90deg)translatez(-100px);background:rgba(0,204,255,.5);}.box5{-webkit-transform:translatez(-100px);-moz-transform:translatez(-100px);background:rgba(153,204,255,.5);}.box6{-webkit-transform:translatez(100px);-moz-transform:translatez(100px);background:rgba(0,255,255,.5);}@-webkit-keyframesmydhua{0%{-webkit-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg);-webkit-transform-origin:centercenter;}100%{-webkit-transform:rotateX(180deg)rotateY(180deg)rotateZ(180deg);-webkit-transform-origin:centercenter;}}@-moz-keyframesmydhua{0%{-moz-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg);-webkit-transform-origin:centercenter;}100%{-moz-transform:rotateX(180deg)rotateY(180deg)rotateZ(180deg);-webkit-transform-origin:centercenter;}}

在線咨詢

上一篇：HTML基礎
下一篇：JavaScript 返回頂部實例

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

3種方法（div法、css法、js法）制作html的旋轉太極圖

您的項目需求