css3實現3d旋轉代碼

著現代瀏覽器對CSS3的支持愈發完善，對于實現各個瀏覽器兼容的元素的水平翻轉或是垂直翻轉效果也就成為了可能。相關的CSS代碼如下：

其中，就目前而言，對于基于webkit核心的瀏覽器，如Chrome以及Safari，實現元素的垂直翻轉或是水平翻轉也可以使用如下樣式：

來源：切圖網（qietu.com）始于2007年，專注web前端開發，培訓

.說明：

推薦指數：★★★★

通過動畫太極的方法，增加學習興趣，對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 值得收藏，慢慢回味。

切圖網客戶項目中碰到一個問題，有一個數字需要傾斜，這個便用到了css3的 rotate的旋轉的屬性，沒有用 skew傾斜，因為傾斜以后的文字是被拉伸變形了，但我并不像這樣，下面是css3詳細，另外要說明的是，這個數字做了滾動到當前屏幕的時候，數字增長。

用到了jquery插件

<script type='text/javascript' src='js/jquery-waypoints-2.0.3.js'></script>
<script type="text/javascript" src="js/jquery.countTo.js"></script>

共一個參數“角度”，單位deg為度的意思，正數為順時針旋轉，負數為逆時針旋轉，上述代碼作用是順時針旋轉45度。

二.縮放 scale

用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);

參數表示縮放倍數；

一個參數時：表示水平和垂直同時縮放該倍率
兩個參數時：第一個參數指定水平方向的縮放倍率，第二個參數指定垂直方向的縮放倍率。

三.傾斜 skew

用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);

參數表示傾斜角度，單位deg

一個參數時：表示水平方向的傾斜角度；
兩個參數時：第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度。

四.移動 translate

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);

參數表示移動距離，單位px，

一個參數時：表示水平方向的移動距離；
兩個參數時：第一個參數表示水平方向的移動距離，第二個參數表示垂直方向的移動距離。

五.基準點 transform-origin

在使用transform方法進行文字或圖像的變形時，是以元素的中心點為基準點進行的。使用transform-origin屬性，可以改變變形的基準點。

用法：transform-origin: 10px 10px;

共兩個參數，表示相對左上角原點的距離，單位px，第一個參數表示相對左上角原點水平方向的距離，第二個參數表示相對左上角原點垂直方向的距離；

兩個參數除了可以設置為具體的像素值，其中第一個參數可以指定為left、center、right，第二個參數可以指定為top、center、bottom。

六.多方法組合變形

上面我們介紹了使用transform對元素進行旋轉、縮放、傾斜、移動的方法，這里講介紹綜合使用這幾個方法來對一個元素進行多重變形。

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

這四種變形方法順序可以隨意，但不同的順序導致變形結果不同，原因是變形的順序是從左到右依次進行，這個用法中的執行順序為1.rotate 2.scalse 3.skew 4.translate

原文地址：http://www.qietu.cn/thread-15197-1-1.html （切圖社區）

加微信公眾號：qietuwang （限做前端的人）

在線咨詢

上一篇：「JS 逆向百例」HN某服務網登錄逆向，驗證碼形同虛
下一篇：網頁源代碼查看竟然有這么多方法！你都知道嗎？

您的項目需求

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

整合營銷服務商

css3實現3d旋轉代碼

您的項目需求