微信扫一扫打赏支持

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

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>

 

 

 

 
posted @ 2018-07-05 18:17  范仁义  阅读(457)  评论(0)  编辑  收藏  举报