• css3-transform


    transform 所做的一系列变换,都仅仅只是这个元素的样子,元素自身所在文档流中所占用的位置不会发生变化,所以是不会影响到其他元素的位置的

    2D

    translate:平移,这点类似于 relative+top+left 的效果

    skew(x,y):翻转,180deg 和 0deg 的效果是一致的,翻转的时候,两侧是保持原来一样平齐的,因为这是2D的,所以虽然说是翻转,但是给人感觉很奇怪,有点像是拉伸的感觉

      绕Y轴旋转                    绕X轴旋转

                    

    ratate:可理解成是绕z轴(垂直于屏幕)的旋转,而skew是绕x(水平方向)、y(上下方向)轴的旋转

    matrix:transform只能有单个值(类似于上面的函数进行函数调用),所以不能纯粹把上面的东西简单用逗号组合在一起,通过使用matrix来实现各种效果的混合

    3D

    第一个要点是在父级元素上设置透视(透视声明只会应用到其第一个子元素上):-webkit-perspective: 200;

      透视的值越大,就表示你的视点与 3D场景之间的景深越大。因此,如果想要一点隐约的 3D 效果,就增大透视值;如果想要非常明显的 3D 效果,则减小透视值

    下一个要点:-webkit-transform-style: preserve-3d;

      为了延续父元素的透视,我们给以上父容器中第一个子元素设定了 preserve-3d

    transform-origin(x,y)

     transform所做的任何变换都是基于一个基准点,默认的基准点就是元素的中心,可以通过transform-origin来改变变换的基准点

    中点(默认值):transform-origin: 50% 50%;    

    左上角:transform-origin: 0% 0%;

     

  • 相关阅读:
    Git windows换行问题
    java之aop使用及自定义注解
    Shiro授权及注解式开发
    Git Gui、Ssh key的使用和ideaui配置使用Git解决冲突(下)
    Git和Github的介绍、简单操作、冲突(上)
    Shiro身份认证、盐加密
    Shiro简介、入门案例、web容器的集成
    SpringMVC入门
    Mybatis之关联关系(一对多、多对多)
    Mybatis整合(Redis、Ehcache)实现二级缓存
  • 原文地址:https://www.cnblogs.com/hellohello/p/7530786.html
Copyright © 2020-2023  润新知