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页面内容,代码如下:html>
欢迎收藏www.yoodb.com2)为了方便演示效果增加CSS样式与2D无关,代码如下:
#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;
}
3)实现2D效果,具体JS代码如下:
注意:上述代码1-3步骤直接粘贴到文件中用浏览器打开点击之后就会出现效果,//clearInterval(rot);(执行clearInterval时setInterval() 方法停止调用函数)注释的代码,如果用户连续点击就会见到特别绚丽的效果,打开之后每次点击只会改变180角度。