博客
关于我
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 存在update不存在insert
查看>>
Mysql 学习总结(86)—— Mysql 的 JSON 数据类型正确使用姿势
查看>>
Mysql 学习总结(87)—— Mysql 执行计划(Explain)再总结
查看>>
Mysql 学习总结(88)—— Mysql 官方为什么不推荐用雪花 id 和 uuid 做 MySQL 主键
查看>>
Mysql 学习总结(89)—— Mysql 库表容量统计
查看>>
mysql 实现主从复制/主从同步
查看>>
mysql 审核_审核MySQL数据库上的登录
查看>>
mysql 导入 sql 文件时 ERROR 1046 (3D000) no database selected 错误的解决
查看>>
mysql 导入导出大文件
查看>>
MySQL 导出数据
查看>>
mysql 将null转代为0
查看>>
mysql 常用
查看>>
MySQL 常用列类型
查看>>
mysql 常用命令
查看>>
Mysql 常见ALTER TABLE操作
查看>>
MySQL 常见的 9 种优化方法
查看>>
MySQL 常见的开放性问题
查看>>
Mysql 常见错误
查看>>
mysql 常见问题
查看>>
MYSQL 幻读(Phantom Problem)不可重复读
查看>>