前言：今天又是一个周末，心情不错，趁着闲暇之余，把剩下来的CSS3学习的内容全部整理出来，练习用的源码也稍微整理了一下。
2D转换
transform:translate||rotate||scale||skew
平移、旋转、缩放、斜切
1. 平移 transform:translate()
参数说明：
- 只有一个值的情况下，表示水平方向运动，正值向右，负值向左，也可以接受百分比，百分比参照的是自身的宽，高
- 两个值分别控制水平和垂直
- 移动不会影响其他的元素，类似于相对定位
- 我们可以通过盒子的绝对定位配合transform：translate（-50%，-50%）实现一个没有宽度高度的盒子水平垂直居中 ,如果没有宽度的话，盒子最大的宽只能达到父盒子的一半
- 如果想要单个的方向移动 可以写成 translateX（）和translateY（）
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: pink; } .box:hover{ /* transform: translate(-10px,10px); */ /* transform: translateY(-10px); */ transform: translateY(10%); } </style> </head> <body> <div class="box">1</div> <div class="box">2</div> </body> </html>
2. 旋转 transform:rotate()
参数说明：
- 单位是deg 角度
- 整体发生旋转（包括里面的内容）
- 正值是顺时针方向旋转 负值反之
- 中心点可以控制 transform-origin：值（值可以是方位名词，可以是像素，也可以是百分比,参照的是自身的宽高）
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: pink; margin: 100px auto; transition: all 10s; transform-origin: 50% 50%; } .box:hover{ transform: rotate(-50deg); } </style> </head> <body> <div class="box">1</div> </body> </html>
3.缩放 transform:scale()
参数说明：
- 没有单位，接受数值和小数
- 只有一个值的情况，整体缩放（等比例）
- 两个值的情况，宽度和高度分别缩放（可能会变形）
- 边框也是会缩放的，并且如果想要一个方向缩放，另外一个方向需要写一个1
- 缩放的中心点也可以被控制
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: pink; margin: 100px auto; transition: all 1s; border: 5px solid #000; transform-origin: right; } .box:hover{ transform: scale(2,1); } </style> </head> <body> <div class="box">1</div> </body> </html>
4.斜切 transform:skew()
参数说明：
- 单位是deg
- 只有一个值的情况下，水平斜切
- 两个值的情况下，水平垂直分别斜切
- 斜切的中心点也可以被控制 如果是X轴斜切 中心点控制上下 如果是Y轴斜切 中心点控制左右
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: pink; margin: 100px auto; transition: all 1s; border: 5px solid #000; transform-origin: bottom; } .box:hover{ transform: skew(45deg); } </style> </head> <body> <div class="box">1</div> </body> </html>
5.过渡 transition
transition：属性 持续时间 过渡曲线 延时
过渡不是动画，是由css的一种状态到另外一种状态中间变换的过程。
值说明：
- 那个属性需要过渡就写什么属性 可以用all来代替全部 （必写）
- 过渡持续的时间，单位可以s或者是ms （必写）
- 过渡的曲线
- 过渡从延时多长时间开始
6.2D转换总结
- 移动，斜切，放大都是可以通过X或者Y去控制某一个方向
- 中心点可以控制旋转，缩放，斜切
- 如果我们想要多个2D效果共存，需要采用连写的方式
- 当在不同场景出现需要transfrom的时候，需要复制前面已经存在的，防止覆盖
- Transform的转换效果顺序尽量保持统一，如果不统一会出现一些问题
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: pink; transition: all 1s; border: 5px solid #000; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%) rotate(0deg) scale(1); } .box:hover{ transform:translate(-50%,-50%) rotate(360deg) scale(2); } </style> </head> <body> <div class="box">1</div> </body> </html>
9203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
