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的旋转太极图

您的项目需求