zoukankan      html  css  js  c++  java
  • 转换属性

    1. 转换:改变元素的位置,角度或大小(平移,旋转,缩放)

    2.语法:
     1.属性:transform

      取值:转换函数
      1.平移转换
        1.作用:改变元素在文档中的位置
        2.函数:translate(x, y)
          取值:x表示水平方向的平移距离
          y表示垂直方向的平移距离
        3.其他情况:
          1.translateX(value)指定沿水平方向平移
          2.translateY(value)指定沿垂直方向平移
          3.translate(value)等价于translateX(value)
     2.旋转变换
      1.将元素旋转一定角度,默认的转换圆点是元素的中心
      2.函数:rotate(45deg)
       取值:以deg角度为单位的数值,正值表示顺时针旋转,负值相反。
     3.缩放变换
      1.作用:改变元素在页面中的大小
      2.函数:scale(value)
       取值:无单位的数值,表示缩放比例
        1.value = 1 原始比例显示
        2.value > 1 等比放大
        3. 0 < value < 1 等比缩小
        4. value < 0 元素不仅会比例缩放,而且会翻转。先缩放,在翻转。
      3.其他情况
        scaleX(v) 横向缩放
        scaleY(v) 垂直缩放

    3.转换原点

      1. 转换原点实际上是元素发生平移,旋转或缩放变换的基准点,默认是元素的中心点
      2.属性:transform-origin
       取值:x y;
        1.像素值
        2.百分比
        3.方位值 水平:left/center/right 垂直:top/center/bottom
      注意:1.以元素左上角为(0,0)点,给出转换原点的坐标位置
         2.改变元素的转换基准点会影响元素转换的效果
         3.旋转操作会连带元素的坐标轴一起旋转,影响其转换效果

  • 相关阅读:
    通过docker把本地AspNetCore WebAPI镜像打包到阿里云镜像仓库并在centos部署
    记一次Java AES 加解密 对应C# AES加解密 的一波三折
    .Net Core MVC实现自己的AllowAnonymous
    Net Core 中间件实现修改Action的接收参数及返回值
    手把手教你实现自己的abp代码生成器
    C# 实现Jwtbearer Authentication
    vs2017调试浏览器闪退
    ABP 邮箱设置
    FastJson反序列化获取不到值
    内网环境下搭建maven私服小技巧
  • 原文地址:https://www.cnblogs.com/zengsf/p/9800049.html
Copyright © 2011-2022 走看看