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旋转代码

您的项目需求