博客
关于我
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 deadlock found when trying to get lock暴力解决
查看>>
MuseTalk如何生成高质量视频(使用技巧)
查看>>
mutiplemap 总结
查看>>
MySQL DELETE 表别名问题
查看>>
MySQL Error Handling in Stored Procedures---转载
查看>>
MVC 区域功能
查看>>
MySQL FEDERATED 提示
查看>>
mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
查看>>
Mysql group by
查看>>
MySQL I 有福啦,窗口函数大大提高了取数的效率!
查看>>
mysql id自动增长 初始值 Mysql重置auto_increment初始值
查看>>
MySQL in 太多过慢的 3 种解决方案
查看>>
MySQL InnoDB 三大文件日志,看完秒懂
查看>>
Mysql InnoDB 数据更新导致锁表
查看>>
Mysql Innodb 锁机制
查看>>
MySQL InnoDB中意向锁的作用及原理探
查看>>
MySQL InnoDB事务隔离级别与锁机制深入解析
查看>>
Mysql InnoDB存储引擎 —— 数据页
查看>>
Mysql InnoDB存储引擎中的checkpoint技术
查看>>
Mysql InnoDB存储引擎中缓冲池Buffer Pool、Redo Log、Bin Log、Undo Log、Channge Buffer
查看>>