zoukankan      html  css  js  c++  java
  • css3的transform ,2D变换

    transform
    transform的中文翻译就是变换,改变,改观,转换的意思
    在css中的主要作用就是对一个div或元素进行样式的改变。
    他的属性(变换方式)有:平移,旋转,缩放,扭曲
    translate(10px,20px;)   指定对象的2D平移,第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
    translateX:10px;   指定对象X轴(水平方向)的平移
    translateY:20px;   指定对象Y轴(垂直方向)的平移
    rotate(30deg);    指定对象的2D旋转,需要先有transform-origin属性的定义
    scale(1.2,1.2);      指定对象的2D缩放,第一个参数对应X轴,第二个参数对应Y轴,如果第二个参数没有提供,则默认取第一个参数的值。  
    scaleX(1.2);    指定对象X轴的(水平方向)缩放
    scaleY(1.2);     指定对象Y轴的(垂直方向)缩放
    skew(-5deg,-5deg);   指定对象扭曲,第一个参数对应X轴,第二个参数对应Y轴,如果第二个参数没有提供,则默认值0
    skewX(-5deg);    指定对象X轴的(水平方向)扭曲 
    skewY(-5deg);    指定对象Y轴的(垂直方向)扭曲

     
     

    transform-origin 
    origin的中文翻译是起源,根源的意思,顾名思义,transform-origin是设置对象以某个原点进行转换。
    transform-origin:(50%,50%);
    这个属性有两个参数,第一个是横坐标值,第二个是纵坐标值,默认都是50%,如果只有一个值,用于横坐标,纵坐标是默认值50%
    left    指定原点的横坐标为center
    center    指定原点的横坐标为center
    right     指定原点的横坐标为right
    top     指定原点的纵坐标为top
    center     指定原点的纵坐标为center
    bottom   指定原点的纵坐标为bottom 

  • 相关阅读:
    结合源码理解Spring MVC处理流程
    Spring Bean的生命周期分析
    面试官:给我说一下你项目中的单点登录是如何实现的?
    Java中的四种引用
    JWT实战总结
    Java读写锁的实现原理
    深入的聊聊Java NIO
    一线大厂Mysql面试题详解
    脱发、秃头防不胜防?这里有一份给码农的减压指南
    手把手教你提高代码Java运行的效率
  • 原文地址:https://www.cnblogs.com/baixuemin/p/6495051.html
Copyright © 2011-2022 走看看