博客
关于我
CSS3新特性——2D转换技术
阅读量:247 次
发布时间:2019-03-01

本文共 1878 字,大约阅读时间需要 6 分钟。

目录

1、2D转换概念

  1. 2D 转换
  • 2D 转换是改变标签在二维平面上的位置和形状

  • 移动: translate

  • 旋转: rotate

  • 缩放: scale

2、2D 转换 translate

  • x 就是 x 轴上水平移动
  • y 就是 y 轴上水平移动
transform: translate(x, y)transform: translateX(n)transfrom: translateY(n)

重点知识点

  • 2D 的移动主要是指 水平、垂直方向上的移动
  • translate 最大的优点就是不影响其他元素的位置
  • translate 中的100%单位,是相对于本身的宽度和高度来进行计算的
  • 行内标签没有效果

代码演示

div {     background-color: lightseagreen;  width: 200px;  height: 100px;  /* 平移 */  /* 水平垂直移动 100px */  /* transform: translate(100px, 100px); */  /* 水平移动 100px */  /* transform: translate(100px, 0) */  /* 垂直移动 100px */  /* transform: translate(0, 100px) */  /* 水平移动 100px */  /* transform: translateX(100px); */  /* 垂直移动 100px */  transform: translateY(100px)}

3、2D 转换 rotate

  1. rotate 旋转

    • 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转
  2. rotate 语法

/* 单位是:deg */transform: rotate(度数)
  1. 重点知识点
  • rotate 里面跟度数,单位是 deg
  • 角度为正时,顺时针,角度为负时,逆时针
  • 默认旋转的中心点是元素的中心点
  1. 代码演示
img:hover {     transform: rotate(360deg)}

使用步骤:

  1. 给元素添加转换属性 transform
  2. 属性值为 rotate(角度)transform:rotate(30deg) 顺时针方向旋转30度
div{         transform: rotate(0deg);}

设置元素旋转中心点(transform-origin)

  1. transform-origin 基础语法
transform-origin: x y;
  1. 重要知识点
  • 注意后面的参数 x 和 y 用空格隔开
  • x y 默认旋转的中心点是元素的中心 (50% 50%),等价于 center center
  • 还可以给 x y 设置像素或者方位名词(topbottomleftrightcenter)

4、2D 转换之 scale

  1. scale 的作用

    • 用来控制元素的放大与缩小
  2. 语法

    transform: scale(x, y)
  3. 知识要点

    • 注意,x 与 y 之间使用逗号进行分隔
    • transform: scale(1, 1): 宽高都放大一倍,相当于没有放大
    • transform: scale(2, 2): 宽和高都放大了二倍
    • transform: scale(2): 如果只写了一个参数,第二个参数就和第一个参数一致
    • transform:scale(0.5, 0.5): 缩小
    • scale 最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
  4. 代码演示

    div:hover {     	   /* 注意,数字是倍数的含义,所以不需要加单位 */	   /* transform: scale(2, 2) */   	   /* 实现等比缩放,同时修改宽与高 */	   /* transform: scale(2) */   	   /* 小于 1 就等于缩放*/	   transform: scale(0.5, 0.5)   }

5、2D 转换综合写法以及顺序问题

  1. 知识要点
  • 同时使用多个转换,其格式为 transform: translate() rotate() scale()
  • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
  • 但我们同时有位置或者其他属性的时候,要将位移放到最前面
  1. 代码演示
div:hover {     transform: translate(200px, 0) rotate(360deg) scale(1.2)}

转载地址:http://atux.baihongyu.com/

你可能感兴趣的文章
mysql 取表中分组之后最新一条数据 分组最新数据 分组取最新数据 分组数据 获取每个分类的最新数据
查看>>
mysql 四种存储引擎
查看>>
MySQL 基础模块的面试题总结
查看>>
MySQL 备份 Xtrabackup
查看>>
mysql 多个表关联查询查询时间长的问题
查看>>
mySQL 多个表求多个count
查看>>
mysql 多字段删除重复数据,保留最小id数据
查看>>
MySQL 多表联合查询:UNION 和 JOIN 分析
查看>>
MySQL 大数据量快速插入方法和语句优化
查看>>
mysql 如何给SQL添加索引
查看>>
mysql 字段区分大小写
查看>>
mysql 字段合并问题(group_concat)
查看>>
mysql 字段类型类型
查看>>
MySQL 字符串截取函数,字段截取,字符串截取
查看>>
MySQL 存储引擎
查看>>
mysql 存储过程 注入_mysql 视图 事务 存储过程 SQL注入
查看>>
MySQL 存储过程参数:in、out、inout
查看>>
mysql 存储过程每隔一段时间执行一次
查看>>
mysql 存在update不存在insert
查看>>
Mysql 学习总结(86)—— Mysql 的 JSON 数据类型正确使用姿势
查看>>