HTML转换效果怎么实现,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页面内容，代码如下：html>

欢迎收藏www.yoodb.com

2D 旋转

2)为了方便演示效果增加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角度。