博客
关于我
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、SQL Server、Oracle数据库排序空值null问题及其解决办法
查看>>
mysql一个字段为空时使用另一个字段排序
查看>>
MySQL一个表A中多个字段关联了表B的ID,如何关联查询?
查看>>
MYSQL一直显示正在启动
查看>>
MySQL一站到底!华为首发MySQL进阶宝典,基础+优化+源码+架构+实战五飞
查看>>
MySQL万字总结!超详细!
查看>>
Mysql下载以及安装(新手入门,超详细)
查看>>
MySQL不会性能调优?看看这份清华架构师编写的MySQL性能优化手册吧
查看>>
MySQL不同字符集及排序规则详解:业务场景下的最佳选
查看>>
Mysql不同官方版本对比
查看>>
MySQL与Informix数据库中的同义表创建:深入解析与比较
查看>>
mysql与mem_细说 MySQL 之 MEM_ROOT
查看>>
MySQL与Oracle的数据迁移注意事项,另附转换工具链接
查看>>
mysql丢失更新问题
查看>>
MySQL两千万数据优化&迁移
查看>>
MySql中 delimiter 详解
查看>>
MYSQL中 find_in_set() 函数用法详解
查看>>