原创

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

        2D就是平面的意思(二维),可以通过元素进行移动、缩放、转动、拉长或拉伸,改变形状、尺寸和位置的一种效果,浏览器支持:Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性,注意Chrome 和 Safari 需要前缀 -webkit-,下面为大家介绍一下具体实现方式。


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

translate()方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数;
rotate()方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转;
scale()方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数;
skew()方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数;
等等...


2、介绍rotate()方法,元素顺时针旋转给定的角度

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

<!DOCTYPE html>
<html>
 <head>
  <title>欢迎收藏www.yoodb.com</title>
 </head>
 <body>
  <div onclick="rotateDIV()" id="rotate">2D 旋转</div>
 </body>
</html>


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

<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 x,n=0,rot;
function rotateDIV(){
    x = document.getElementById("rotate");
    //clearInterval(rot);
    rot = setInterval("startRotate()",10);
}

function startRotate(){
    n = n+1;
    x.style.transform="rotate(" + n + "deg)";
    x.style.webkitTransform="rotate(" + n + "deg)";
    x.style.OTransform="rotate(" + n + "deg)";
    x.style.MozTransform="rotate(" + n + "deg)";
    if (n==180 || n==360){
        clearInterval(rot);
        if (n==360){
            n=0;
        }
    }
}

//-->
</script>


注意:上述代码1-3步骤直接粘贴到文件中用浏览器打开点击之后就会出现效果,//clearInterval(rot);(执行clearInterval时setInterval() 方法停止调用函数)注释的代码,如果用户连续点击就会见到特别绚丽的效果,打开之后每次点击只会改变180角度。

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

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

相关推荐

评论

分享:

支付宝

微信