zoukankan      html  css  js  c++  java
  • css3 2D 转换 基础语法

    2D转换

    rotate 转换 指定一个平面类的旋转

    有兼容性 可以在前面加上 -webkit- 谷歌内核  -o- opera 内核  -ms- ie内核 -moz-火狐内核

    语法:rotate(deg)正顺时针负数逆时针

    transform:translateX(相对单位 单位px em 百分比)水平x轴移动 移动顺序左到右  负值右到左

    transform:translateY(相对单位 单位px em 百分比)水平垂直Y轴移动 移动顺序上到下 负值 下到上

    transform:translate(第一个参数为x,第二个参数为y)  重点 第一个单位x轴不可省略 y轴可以 

    缩放 

    有兼容性 可以在前面加上 -webkit- 谷歌内核  -o- opera 内核  -ms- ie内核 -moz-火狐内核

     transform:scaleX(单位为0.1开始  1代表不变 超出1的话图片会被拉伸) 往X轴缩放

    transform:scaleY(单位0.1开始 1代表不变 超出1的话图片会拉伸) 往Y轴缩放

    transform:scale(x,y) 重点 第一个单位x轴不可省略 y轴可以 

    transform:scale(-1,1)翻转

    斜切 

    transform:skewX ( 0deg) 正值逆 逆值顺 

    transform:skewY(0deg)正值顺 逆值负

    transform:skew()  第一个值为x ,第二个值为Y 如果只设置了第一值 那么第二个默认为0

    transform-orign:(x,y,z)设置元素在哪个点旋转  默认是50%,50%  

  • 相关阅读:
    P1855 榨取kkksc03
    P1359 租用游艇
    P1656 炸铁路
    P1536 村村通
    P3367 【模板】并查集
    P3395 路障(洛谷)
    P1135 奇怪的电梯(洛谷)
    P1331 海战(洛谷)
    conda安装和pip安装的国内镜像配置
    cvpr2020 | 图像增强与恢复论文盘点
  • 原文地址:https://www.cnblogs.com/ckxbk/p/12879506.html
Copyright © 2011-2022 走看看