原创

HTML+CSS3 样式实现 3D 转换特效方案

3D就是平面的意思(三维),可以通过元素改变形状、尺寸和位置的一种效果,浏览器支持:nternet Explorer 10 和 Firefox 支持3D转换,注意 Chrome 和 Safari 需要前缀 -webkit-,Opera 不支持 3D 转换(它只支持 2D 转换)下面为大家介绍一下具体实现方式。


1、首先了解2D转换使用的各方法含义:

rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转;
rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。


2、介绍rotateX() 方法与rotateY() 方法连用,具体步骤如下

1)html页面内容,代码如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>欢迎收藏www.yoodb.com</title>
 </head>
 <body>
  <div onclick="rotateDIV()" id="rotate">3D 旋转</div>
 </body>
</html>


2)为了方便演示效果增加CSS样式与3D效果无关,代码如下:

<style>
#rotate{
width:80px;
height:80px;
font-size:16px;
font-weight: bold;
border: 2px solid #000000;
background: red;
margin: 0 auto;
line-height: 80px;
text-align: center;

}
</style>


3)实现2D效果,具体JS代码如下:

<script>
<!--
var y,n=0,rot;
function rotateDIV(){
    y = document.getElementById("rotate");
    //clearInterval(rot);
    rot = setInterval("startRotate()",10);
}

function startRotate(){
    n = n+1;
    y.style.transform="rotateX(" + n + "deg)";
    y.style.webkitTransform="rotateX(" + n + "deg)";
    y.style.OTransform="rotateX(" + n + "deg)";
    y.style.MozTransform="rotateX(" + n + "deg)";
    if(n > 180){
        y.style.transform="rotateY(" + n + "deg)";
        y.style.webkitTransform="rotateY(" + n + "deg)";
        y.style.OTransform="rotateY(" + n + "deg)";
        y.style.MozTransform="rotateY(" + n + "deg)";
    }
    if (n==180 || n>=360) {
        //clearInterval(rot);
        if (n >= 360){
            n = 0;
        }
    }
}
//-->
</script>


        注意:上述代码1-3步骤直接粘贴到文件中用浏览器打开点击之后就会出现效果,//clearInterval(rot);(执行 clearInterval 时 setInterval()  方法停止调用函数)注释的代码,此时点击之后先元素围绕其 X 轴以给定的度数进行旋转,之后元素围绕其 Y 轴以给定的度数进行旋转,打开注释每次点击只会改变180角度。

关注下方微信公众号“Java精选”(w_z90110),回复关键字领取资料:如HadoopDubboCAS源码等等,免费领取资料视频和项目。 

涵盖:程序人生、搞笑视频、算法与数据结构、黑客技术与网络安全、前端开发、Java、Python、Redis缓存、Spring源码、各大主流框架、Web开发、大数据技术、Storm、Hadoop、MapReduce、Spark、elasticsearch、单点登录统一认证、分布式框架、集群、安卓开发、iOS开发、C/C++、.NET、Linux、Mysql、Oracle、NoSQL非关系型数据库、运维等。

评论

分享:

支付宝

微信