CSS其它知识点(移动、旋转、缩放)
2D转换
移动
利用这个可以实现盒子的水平垂直居中，我们之前的做法是：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
height: 100px;
width: 100px;
background-color: blue;
}
div p {
position: absolute;
height: 20px;
width: 20px;
background-color: green;
margin-top: -10px;
margin-left: -10px;
top: 50%;
left: 50%;
}
style>
head>
<body>
<div>
<p>
p>
div>
body>
效果：
我们先是给盒子加了一个绝对定位，然后用 top: 50%; left: 50%;调整位置：
我们发现位置偏了，于是要让它向上、左分别移动高度、宽度的一半便能达到目的：
margin-top: -10px;
margin-left: -10px;
绝对定位之后再进行margin操作是相对于盒子本身来移动的？
但现在用如下方式也可做到相同效果：
div p {
position: absolute;
height: 20px;
width: 20px;
background-color: green;
/* margin-top: -10px;
margin-left: -10px; */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
旋转
我们可以用这个来做一些简单的特效，当鼠标移动到盒子上时会在0.5s内顺时针旋转360°：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
margin: 200px auto;
width: 200px;
height: 200px;
background-color: red;
transition: all .5s ease;
border: 3px solid plum;
}
div:hover {
transform: rotate(360deg);
}
style>
head>
<body>
<div>
123
div>
body>
还有这个：
我们之前做这种小三角是用的字体图标，但还可以用如下方法：
- 先弄两个边框，然后将其旋转相应角度就可以了
其实就是保留橙色区域的内容，下面来看具体代码：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
position: relative;
width: 200px;
height: 40px;
border: 2px solid #ccc;
}
div::after {
content: "";
position: absolute;
height: 10px;
width: 10px;
border-right: 2px solid #ccc;
border-bottom: 2px solid #ccc;
right: 13px;
top: 10px;
transform: rotate(45deg);
transition: all .5s ease;
}
div:hover:after {
top:15px;
transform: rotate(225deg);
}
style>
head>
<body>
<div>div>
body>
效果：
当鼠标经过时：
旋转的中心
上面所说的旋转都是以图形中心旋转的，也可以以其它点旋转。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
width: 400px;
height: 200px;
background-color: red;
margin: 100px auto;
transition: all 1s;
transform-origin: left bottom;
}
div:hover {
transform: rotate(180deg);
}
style>
head>
<body>
<div>div>
body>
效果：
可以看见，现在是以左下顶点为中心旋转了(这里可能看不出来…)
旋转案例
来做一个案例：当鼠标经过一个盒子时，有另一个盒子旋转出现在里面。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
overflow: hidden;
border: solid 1px black;
/* background-color: red; */
margin: 100px auto;
}
div::before {
content: "";
display: block;
width: 200px;
height: 200px;
background-color: rgb(79, 224, 79);
transform: rotate(180deg);
transform-origin: left bottom;
transition: all .5s ease-in;
}
div:hover::before {
transform: rotate(0deg);
}
style>
head>
<body>
<div>div>
body>
效果：
缩放
其实直接在hover里修改width/height也能放大，但这么做的放大盒子的上边不会改变，会向下放大；但scale默认是围绕着中心放大(当然可以设置放大的原点)，且不会挤走别的盒子。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
width: 329px;
height: 360px;
overflow: hidden;
margin: 100px auto;
border: 1px solid black;
}
div img {
transition: all .3s;
}
div:hover img {
transform: scale(1.2);
}
style>
head>
<body>
<div>
<img src="./pic1.jpg" alt="">
div>
body>
效果：
以上三种变化可以放在一起写
总结
