02-css3之2D转换
一、CSS3 —2D转换
转换(transform)可以实现元素的位移、旋转、缩放等效果。可以理解为变形。
1. 2D转换之移动translate
可以改变元素的页面中的位置，类似于定位。
1.1语法
transform:translate(x,y);
1.2用法
.box1 {
background-color: #f34;
/* 前面是x轴，后面是y轴，两者要用逗号隔开 */
/* 1.translate移动不会影响其他元素的位子 */
transform: translate(80px, 50px);
}
.box2 {
background-color: #999;
/* 如果只想移动某一个值，可以在translate后跟个坐标轴大写 */
transform: translateX(52px);
/* 写法二：y轴为0，不能省略 */
transform: translate(52px, 0);
}
.box3 {
background-color: #aee9a9;
/* 2.translate里面的如果是百分号，那么移动的就是他自身宽的50%和高的50% */
transform: translate(50%, 50%);
}
利用translate配合定位使盒子垂直水平居中
.box4 {
position: relative;
background-color: #faf634;
transform: translate(100px, 100px);
}
/* 让box5在box4 中水平垂直居中 */
.box5 {
position: absolute;
left: 50%;
top: 50%;
/* 此时盒子的上边垂直居中于父盒子，左边水平居中于父盒子，只需要向上和向左走自身宽度的一半即可垂直水平居中 */
/* 由于x轴值越大就是向右，y轴值越大就是向下，所里向左和向上是负号 */
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: green;
}
translate对行内元素和行内块元素无效
span {
/* 3.translate对行内元素无效 */
transform: translate(10px, 20px);
}
input {
/* 4.translate对行内块元素也无效 */
transform: translate(100px 50px);
}
img {
transform: translate(100px 50px);
}
1.3百分比情况下与定位中方向值的区别
translate值为百分比时，x是自身宽的百分比，y是自身高的百分比。
相对定位中的left/right的值为百分比时，是根据离他最近的有定位的父元素的宽的百分比，top/bottom则是高。
1.4总结
1.移动的盒子不会影响到其他元素的位置。
2.translate中的百分比是自身元素宽高的百分比。
3.对行内元素和行内块元素没有效果。
2. 2D转换之旋转—rotate
让元素在二维平面内顺时针或逆时针旋转。
2.1语法
transform:rotate(度数);
2.2用法
.box1 {
background-color: #f34;
/* 后面一定要带单位deg，就是度 */
transform: rotate(100deg);
}
.box2 {
background-color: #999;
/* 当度数是正直就是顺时针旋转，当度数是负值就是逆时针旋转 */
transform: rotate(-100deg);
}
span {
/* rotate对行内元素无效 */
transform: rotate(60deg);
}
input {
/* rotate对行内块元素有效 */
transform: rotate(50deg);
}
2.3总结
1.rotate里的值必须跟上单位deg。
2.当rotate里的值为正数，即为顺时针旋转，为负数就是逆时针旋转。
3.默认的旋转点是元素的中心点。
4.rotate对行内元素无效，对行内块元素和块级元素有效。
2.4 案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转三角</title>
<style>
div {
position: relative;
width: 250px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: "";
position: absolute;
right: 10px;
top: 10px;
width: 10px;
height: 10px;
/* 给右边框和下边框 */
border-right: 1px solid #000;
border-bottom: 1px solid #000;
/* 让盒子顺时针旋转45度 */
transform: rotate(45deg);
}
/* 鼠标经过div时，里面的小三角翻转180度 */
div:hover::after {
/* 要想三角翻转180度，要先加上三角本身的45度 */
transform: rotate(225deg);
border-color: orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.2D转换中心点—transform-origin
可以设置元素转换的中心点
3.1语法
transform-origin:(x y);
3.2用法
.box1 {
background-color: #f34;
/* 默认是50% 50%，即center center，就是元素的中心点 */
transform-origin: 50% 50%;
}
.box2 {
background-color: #999;
/* 方位名词，即为左下角 */
/* transform-origin: left bottom; */
/* 都是方位名词时可以颠倒顺序 */
transform-origin: bottom left;
}
.box3 {
background-color: #aee9a9;
/* 可以跟精确的像素值，不能颠倒顺序,x必须在前，y必须在后 */
transform-origin: 20px 30px;
}
.box4 {
background-color: #faf634;
/* 可以混搭,不能颠倒顺序，前面永远是x轴 */
transform-origin: 20px center;
}
3.3 总结
1.中心点的值用空格隔开。
2.中心点的值可以是方位名词，像素，也可以混搭，和background-position用法一致。
3.4 案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
/* 最后，溢出隐藏 */
overflow: hidden;
float: left;
width: 200px;
height: 200px;
border: 1px solid red;
list-style: none;
/* 清除相邻li边框粗线 */
margin-left: -1px;
}
li:after {
display: block;
content: "小艾";
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
background-color: skyblue;
/* 先让它旋转出父盒子 */
transform: rotate(90deg);
/* 中心点是center时，怎么转都出不来，此时需要让盒子沿着左下角旋转 */
transform-origin: left bottom;
transition: all .5s;
}
li:hover::after {
/* 鼠标经过li时，after复原，即0度 */
transform: rotate(0deg);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
4.2D转换之缩放-scale
可以使元素放大或缩小。
3.1语法
transform:scale(x,y)
3.2用法
.box1:hover {
/* 以前的放大是通过调整宽高 */
/* 缺点：1.会影响下面的盒子；2.宽度向两边延伸，高度向下延伸，且不可改变 */
width: 200px;
height: 200px;
}
.box2:hover {
/* 默认值就是1，即为1倍 */
transform: scale(1, 1);
}
.box3:hover {
/* 前面的值为宽，后面的值为高，即宽度放大2倍，高度不变 */
transform: scale(2, 1);
}
.box4:hover {
/* 不会影响下面的盒子，宽高都是由中心点向四面八方延伸 */
/* 两个值相同的时候可以省略 */
transform: scale(2);
}
.box5:hover {
/* 当scale值小于1时，即为缩小 */
/* 缩小也是向中心点缩小 */
transform: scale(0.5);
}
.box6 {
background-color: skyblue;
transform-origin: left bottom;
}
.box6:hover {
/* 沿着中心点放大2倍 */
transform: scale(2);
}
.box7 {
background-color: skyblue;
transform-origin: 10px 50px;
}
.box7:hover {
/* 沿着中心点缩小一半 */
transform: scale(0.5);
}
3.3 总结
1.scale值之间用","隔开
2.scale值默认为(1,1)，即是原来的一倍，不变。
3.scale值大于1时候，就是沿着中心点放大；scale值小于1时候，就是朝着中心点缩小。
4.scale中只写一个值，省略的值默认与写的值相等。
5.scale缩放与设置宽高缩放的区别在于，scal不会影响其他盒子，且缩放的中心点可以改变。
5.2D转换之斜切 - skew
5.1语法
transform:scale(x,y)
5.2用法
.box1 {
/* X正值，那么x轴不动，y轴逆时针斜切30deg */
transform: skewX(30deg);
}
.box2 {
/* X负值，那么x轴不动，y轴顺时针斜切30deg */
transform: skewX(-30deg);
}
.box3 {
/* Y正值，那么y轴不动，x轴逆时针斜切30deg */
transform: skewY(30deg);
}
.box4 {
/* Y负值，那么y轴不动，x轴顺时针斜切30deg */
transform: skewY(-30deg);
}
.box5 {
/* 当xy的值加起来为90deg时,xy轴重合,盒子会斜成一条线 */
transform: skew(38deg, 52deg);
}
.box6 {
transition: all .5s;
}
.box6:hover {
transform: skew(45deg, 45deg);
}
5.3总结
1.斜切哪个轴，哪个轴就保持不动，另一个轴根据角度的正负进行倾斜。
2.斜切X轴时候，如果是正值，y轴就逆时针旋转对应度数，反之亦然。
3.斜切Y轴时候，如果是正值，x轴就逆时针旋转对应度数，反之亦然。
4.当xy轴度数相加为90deg或-90deg时候，此时xy轴重合，盒子会被隐藏。
5.4 案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 300px;
height: 400px;
margin: 100px auto;
/* 溢出隐藏 */
overflow: hidden;
background-color: #0099ff;
}
.box::after {
content: '';
position: absolute;
top: 0px;
/* 将光柱移出去 */
left: -150px;
width: 20px;
height: 450px;
/* 光柱渐变 */
background: linear-gradient(to right, #ffffff 0%, #eee 50%, #ffffff 100%);
transform: skewX(-30deg);
}
.box:hover::after {
left: 400px;
/* 过渡加在hover上，只有开始的时候有过渡，回去的时候瞬间完成 */
transition: left .6s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
6.2D转换之综合写法
6.1 语法
有位移先写位移，其他属性之间用空格隔开
transform:translate(x,y) rotate(deg) scale(x,y);
6.2 用法
.box1:hover {
/* 呈直线移动并自身旋转，先位移，再其他 */
transform: translate(50px, 100px) rotate(45deg) scale(2);
}
.box2:hover {
/* 呈螺旋状旋转移动，因为先旋转时，旋转后盒子坐标轴方向改变，再进行位移会走偏 */
transform: rotate(45deg) translate(50px, 100px) scale(2);
}
6.3总结
1.各属性之间用空格隔开。
2.顺序会影响到转换的效果(物体旋转时，内部坐标系也会一起发生旋转)。
3.当同时有位移或者其他属性的时候，要将位移放到最前面
