2D旋转

先给个容器

<p onClick="rotate2D()" id="rotate2D" class="animated_div">2D 旋转</p>

再给个样式(乱写的,可随意修改。)

.animated_div{width:60px; height:40px; color:#ffffff; position:relative; font-weight:bold; padding:20px 10px 0px 10px; float:left; margin:20px; margin-right:50px; border:1px solid #888888; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center; vertical-align:middle;}

#rotate2D{border:1px solid #000000; background:red; margin:10px; opacity:0.7;}

定义好需要的变量

//2dContainer为获取到的旋转元素
//count2D用来在Timer里面计算的渐变的角度
//roll2DTimer旋转的定时器
var 2dContainer,count2D=0,roll2DTimer;

拿到元素让它转

function rotate2D()
{
2dContainer=document.getElementById("rotate2D");
clearInterval(roll2DTimer);
roll2DTimer=setInterval("start2DRotate()",10);
}

具体怎么转还得写在计时器里

function start2DRotate()
{
count2D=count2D+1;
2dContainer.style.transform="rotate(" + count2D + "deg)";
2dContainer.style.webkitTransform="rotate(" + count2D + "deg)";
2dContainer.style.OTransform="rotate(" + count2D + "deg)";
2dContainer.style.MozTransform="rotate(" + count2D + "deg)";
if (count2D==180 || count2D==360)
{
clearInterval(roll2DTimer);
if (count2D==360){count2D=0;}
}
}

style里所有浏览器的transform都有属性,都要进行对应的设置,设置的方式是把rotate()方法写成字符串传给transform属性,这个方式还挺特别的。

3D旋转也一样,先来一个容器

<p onClick="rotate3D()" id="rotate3D" class="animated_div">3D 旋转</p>

样式和2D的一样

.animated_div{width:60px; height:40px; color:#ffffff; position:relative; font-weight:bold; padding:20px 10px 0px 10px; float:left; margin:20px; margin-right:50px; border:1px solid #888888; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center; vertical-align:middle;}

#rotate3D{border:1px solid #000000; background:red; margin:10px; opacity:0.7;}

定义好需要的变量

//3dContainer为获取到的旋转元素
//count3D用来在Timer里面计算的渐变的角度
//roll3DTimer旋转的定时器
var 3dContainer,count3D=0,roll3DTimer;

拿到元素让它转

function rotate3D()
{
3dContainer=document.getElementById("rotate3D");
clearInterval(rot3DTimer);
rot3DTimer=setInterval("start3DRotate()",10);
}

在计时器里写具体转法

function start3DRotate()
{
count3D=count3D+1;
3dContainer.style.transform="rotateY(" + count3D + "deg)";
3dContainer.style.webkitTransform="rotateY(" + count3D + "deg)";
3dContainer.style.OTransform="rotateY(" + count3D + "deg)";
3dContainer.style.MozTransform="rotateY(" + count3D + "deg)";
if (count3D==180 || count3D>=360)
{
clearInterval(rot3DTimer);
if (count3D>=360){count3D=0;}
}
}

终于可以转起来了呢,然而这并没有什么卵用,毫无逼格!

2D旋转和3D旋转的更多相关文章

  1. CSS3 transform 属性(2D,3D旋转)

    一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...

  2. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  3. 3d旋转--transform-style: preserve-3d,translate3d(x,y,z),perspective()

    transform-style: preserve-3d,translate3d(x,y,z),perspective() 让其倾斜的核心:加perspective(600px)让其动的核心:rans ...

  4. 32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

    要想模仿QQ登录界面的3D旋转,我们需要学习Rotation和Flipable.由于没找到QQ的资源图,所以我们以两个图片为例模仿QQ的3D旋转,如下图所示: 最终效果如下所示: 1.Rotation ...

  5. 3D旋转菜单

    今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...

  6. 低调奢华 CSS3 transform-style 3D旋转

    点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...

  7. CSS3——3D旋转图(跑马灯效果图)

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

  8. Flash相册-------3D旋转应用

    1.图层一,图片1,转换为元件 2.3D旋转工具,变形--->y->180

  9. 【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表(2)上

    这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d. ...

随机推荐

  1. C语言自评

    问卷调查:你对自己的未来有什么规划?做了哪些准备?答:做设计方面的工作:正在努力自学有关这方面的知识 你认为什么是学习?学习有什么用?现在学习动力如何?为什么?答:学习就是增长见识:学习的作用就是为了 ...

  2. iOS- Autolayout自动布局

    1.前言 •在iOS程序中,大部分视图控制器都包含了大量的代码用于设置UI布局,设置控件的水平或垂直位置,以确保组件在不同版本的iOS中都能得到合理的布局 •甚至有些程序员希望在不同的设备使用相同的视 ...

  3. Splash广告界面

    在软件开始启动时都是会使用一个splashActivity实现联网判断和相关资源的加载,在一款网络软件上开始时的缓存加载和网络判断可以为用户节省不必要的流量开销. 使用handler延时启动下一个ac ...

  4. static关键字的新用法

    static关键字的新用法和总结: static这个关键字,也可以像“self”一样,代表“当前类”,用于访问一个类的“静态属性或静态方法”: 但, static,在应用中,更灵活,因此更常见! 因为 ...

  5. git管理策略

    master:生产环境,用于发布正式稳定版 release-*.*:预发布分支,发布稳定版之前的正式分支 develop:开发分支,测试环境中使用 feature/who xxx:功能分支,功能未开发 ...

  6. excel copy cell & batch operation & checkbox

    excel copy cell & batch operation & checkbox excel 右下角,下拉/双击 (复制 cell) 注意: 不是选择列

  7. 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案

    最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...

  8. 第77天:jQuery事件绑定触发

    一.元素操作 1. 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别: 返回值不 ...

  9. Vue2.0 - 全局操作 Vue.set

    引:http://www.cnblogs.com/zccblog/p/7192420.html Vue.set 的作用就是在构造器外部操作构造器内部的数据.属性或者方法.比如在vue构造器内部定义了一 ...

  10. eclipse启动报错: No Java virtual machine

    在 scala-ide下载集成scala包的eclipse版本使用,启动时报错: A java runtime environment (JRE) or java development kit (J ...