原创

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

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

评论

分享:

支付宝

微信