资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS3 3D学习笔记

CSS3 3D学习笔记

DevTalking / 667人阅读

摘要：最近学习了的动画在这里做一个总结。也可以用复合属性移动图片正方向的左边移动也就是我们的右边不要以为始终是是数学数轴的轴方向。其中值为默认值，表示所有子元素在平面呈现。更多的还是需要结合代码修改练习去体会。

最近学习了CSS3的动画,在这里做一个总结。
现在大部分的交互动画,我们都可以使用CSS3来完成,效率更高，并且在移动端上的兼容非常好。但是缺少一种正向编程的快感(个人感觉)。

先引出关于3D的几个基本技术点,多的就不说了,这几个也够够的了:

旋转:rotate、rotateX、rotateY、rotateZ

移动:translate3D、translateX、translateY、translateZ

景深、透视:perspective

3D空间:transform-style:perseve-3d

rotate、rotateX、rotateY、rotateZ 旋转
rotate:

transform:rotate(45deg);=>顺时针旋转45度

rotateX:

`transform:rotateX(45deg);=>垂直绕着X轴旋转(图片往后倒，你往前扑的方向)，有一个很好玩的形容，就是体操运动员绕着单杠在旋转!!不知道的可以去看一下。

rotateY:

transform:rotateY(45deg);=>垂直绕着Y轴逆时针旋转(也就是图片正方向的右肩移动)，也有一个很好玩的形容,就是跳钢管舞。

rotateZ:

transform:rotateZ(45deg);=>跟rotate一样。

此时此刻单纯用这几个是没办法看出效果来的,需要借助景深或者叫透视perspecitve来完成。

perspective:景深、透视

perspective:

perspective:600px;=>需要加在旋转变形的父容器上,数值越大，相当于离他的距离越大。具体的可以自己去尝试。

在使用景深的时候有一个注意点,在使用translateZ的时候,景深加在一个和自己宽高一样的父容器上的效果和加在一个比自己大的父容器上的效果不一样,这是因为景深相当于我们始终在在父容器的中心点的位置去观看。这个自己去尝试就能明白了。



我们所能看到的物体大小,取决于我们的视野能看到的多少。



    

        
             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/102606.html

               

                      
               
              

              

                
相关文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    CSS3学习笔记
    
                                                     
    摘要：在动画过程中，您能够多次改变这套样式。以百分比来规定改变发生的时间，或者通过关键词和，等价于和。为了获得最佳的浏览器支持，您应该始终定义和选择器。注释请使用动画属性来控制动画的外观，同时将动画与选择器绑定。CSS3 被划分为模块
其中最重要的 CSS3 新增实用模块包括：

背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面

CSS3 边框:
　　用于创建圆角

border...
    
                                                   
                          
    
                                
    
                                    wenshi11019
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    CSS 性能优化笔记
    
                                                     
    摘要：硬件加速是指应用的图形性能对浏览器中的一些图形操作交给来完成，因为是专门为处理图形而设计，所以它在速度和能耗上更有效率。

在实习做一个移动项目的时候，实现一个动画效果，在 iPhone 和 Chrome 上调试没有问题，在千元左右的 Android 机上测试问题就很大了，卡顿非常明显，百思不得其解，吐血，卒。
这个悲伤的故事就是本文的引子，真真切切的体会到了 CSS 对用户体验的影响非...
    
                                                   
                          
    
                                
    
                                    LiuZh
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    纯JS实现KeyboardNav(学习笔记)二
    
                                                     
    纯JS实现KeyboardNav(学习笔记)二

这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写
这篇主要是添加css,优化js编写逻辑和代码排版
GitHub项目源码
预览地址

最终效果
showImg(https://sfault-image.b0.upaiyun.com/202/564/2025649432-5adb193d75ef2_articlex);
...
    
                                                   
                          
    
                                
    
                                    msup
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    纯JS实现KeyboardNav(学习笔记)二
    
                                                     
    纯JS实现KeyboardNav(学习笔记)二

这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写
这篇主要是添加css,优化js编写逻辑和代码排版
GitHub项目源码
预览地址

最终效果
showImg(https://sfault-image.b0.upaiyun.com/202/564/2025649432-5adb193d75ef2_articlex);
...
    
                                                   
                          
    
                                
    
                                    Muninn
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
发表评论

                   

                                      
                      

                        登陆后可评论
                      
                   

               

              

                

                  
0条评论

DevTalking

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<