原创

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),回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。

Java精选专注程序员推送一些Java开发知识,包括基础知识、各大流行框架(Mybatis、Spring、Spring Boot等)、大数据技术(Storm、Hadoop、MapReduce、Spark等)、数据库(Mysql、Oracle、NoSQL等)、算法与数据结构、面试专题、面试技巧经验、职业规划以及优质开源项目等。其中一部分由小编总结整理,另一部分来源于网络上优质资源,希望对大家的学习和工作有所帮助。

评论

分享:

支付宝

微信