css-transform-3d效果学习总结

关键词

1、perspective  透视
2、perspecitve-origin
3、rotateX rotateY rotate3d
4、scale3d缩放
5   translate3d
6   transform-style
7  backface-visibility


perspective 3d效果需要视点才能显示效果

perspective-origin 透视的点,就好像有一个窗户,你需要找到一点才能看清楚里面的内容。

rotateX rotateY rotate3d 

rotatex
rotatey

rotatez

scale3d这个没有什么特别的,只要注意 他在z上面放大的话配合其它的变形效果  会影响视点与视物的距离;

translate3d 这个也没有什么特别 就在三个轴上面移动

transform-style 有二个值  1、flat  preserve-3d  

flat就是内部没有3D效果

preserve内部展现3D效果

backface-visibility  就是能否看 人后面有没有其它东西 默认是看的到,

练习

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 当我看到下面这张基本图的时候,我的右侧的浓眉毛不由自主抖动了两下,呵,呵呵~~ rotateY( angle ) ...
    追風逸少丶阅读 1,530评论 0 3
  • 一、写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容。看过海贼王的都知道,带D的家伙...
    MrZengB阅读 1,369评论 2 9
  • 必不可少的perspective属性 perspective属性的存在与否决定了你所看到的是2次元的还是3次元的,...
    codeice阅读 764评论 0 0
  • CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍...
    张歆琳阅读 28,016评论 5 81
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,896评论 0 4