css3-13 css3的3D动画如何实现

一、总结

一句话总结：这里是transform+setInterval实现。transform属性里面的rotate属性值变成rotateX或rotateY即可实现从2D样式变为3D样式，但是这只是死样式，可以用setInterval把它弄活。

1、transform属性里面的rotate属性值如何从2D样式变为3D样式？

rotate属性值变成rotateX或rotateY即可实现

22 <script>
23 s=0; 24 v=10; 25 $('.img').click(function(){ 26  setInterval(function(){ 27  s+=v; 28  $('.img').css({'transform':'rotateX('+s+'deg)'}); 29  },500); 30 }); 31 </script>

2、transform设置的样式是静态样式还是动态样式？

静态

3、如何把transform样式变成动态？

动态改变样式值，用setInterval来实现动态改变样式值

22 <script>
23 s=0; 24 v=10; 25 $('.img').click(function(){ 26  setInterval(function(){ 27  s+=v; 28  $('.img').css({'transform':'rotateX('+s+'deg)'}); 29  },500); 30 }); 31 </script>

4、将transform变成动画有哪几种方式？

setInterval，过渡transparent，动画animation

二、css3的3D动画如何实现

1、相关知识

2、代码

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         .img{ 8             background: #ccc;
 9             width:256px;
10             height:256px;
11             border-radius:256px;
12             overflow: hidden;
13         }
14     </style>
15     <script src="jquery.min.js"></script>
16 </head>
17 <body>
18     <div class='img'>
19         <img src="dog.png" alt="">
20     </div>
21 </body>
22 <script>
23 s=0;
24 v=10;
25 $('.img').click(function(){
26     setInterval(function(){
27         s+=v;
28         $('.img').css({'transform':'rotateX('+s+'deg)'});
29     },300);
30 });
31 </script>
32 </html>

css3-13 css3的3D动画如何实现相关推荐

8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画如 ...
js操作设置css动画,使用 CSS3 和 JavaScript 制作链接反转 3D 动画 - 文章教程
使用 CSS3 和 JavaScript 制作链接反转 3D 动画,CSS 和 JavaScript 技巧用来创建顶层的悬浮效果,使用 transfomr-origin 和 transform-sty ...
html动画翻书特效,css3 做一个类似于翻书特效的3D动画
我们来看下做一个css3 3D动画需要哪些东西.前面我们已经使用transition和transform做了一些简单的操作. 设置3D场景做3D动画,我们首先要设置3D场景.3D场景我们通常用per ...
html5 特效框架,带37种3D动画特效的跨浏览器CSS3动画框架
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架.它可以轻松的制作出各种CSS3 3D动画效果,可以在移动手机上使用.并且使用极其简单,使用时只需要添加相应的cla ...
CSS3新增属性——过渡和动画（2D属性，3D动画）
目录 CSS3 一.过渡 1. 属性 2. 花费时间 3. 运动曲线 4. 何时开始二.2D属性 2. translate(移动) 2. rotate(旋转) 3. scale(缩放) 4. tr ...
CSS3 3D动画（一）
CSS3 3D动画知识点详解这篇文章的主要内容是关于css3关于新增3d部分的一个解析,那么下一篇内容我们将会进行一个3D相册的一个练习. 由于CSS3的新增还有很多浏览器的不支持,所以我们简单说一 ...
android开发骰子动画,GitHub - jieyou/dice: 一个css3 3d动画效果的色子（或称骰子？）...
dice -- 3d色子(或称骰子?) 一个css3 3d动画效果的色子完全效果(完全流畅的3d动画.阴影.圆角):Chrome\Firefox\Safari\iOS Safari 6.0+\And ...
CSS3动画之3D动画
所有东西一跟3D扯上关系,复杂指数都是噌噌噌往上走.不过也正常,毕竟多了一个维度,要有三维应有的尊严. 3D Transforms要怎么写?能写翻牌效果吗?能写翻书效果吗?能写出立体书的效果吗?点进来 ...
【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...

css3-13 css3的3D动画如何实现

css3-13 css3的3D动画如何实现

一、总结

一句话总结：这里是transform+setInterval实现。transform属性里面的rotate属性值变成rotateX或rotateY即可实现从2D样式变为3D样式，但是这只是死样式，可以用setInterval把它弄活。

1、transform属性里面的rotate属性值如何从2D样式变为3D样式？

2、transform设置的样式是静态样式还是动态样式？

3、如何把transform样式变成动态？

4、将transform变成动画有哪几种方式？

二、css3的3D动画如何实现

1、相关知识

2、代码

css3-13 css3的3D动画如何实现相关推荐

最新文章

热门文章