2D平移
transform:translateX(100px); //x轴的位移
transform:translateY(100px); //y轴的位移
transform:translateX(100px) translateX(100px); //往对角位置位移
transform:translate(100px,100px); //两种写法相同
面试题：为什么用translate而不用left
translate支持在GPU上独立渲染
2D缩放
X轴和Y轴等比缩放
transform:scale(1.5);
只放大X轴或Y轴
transform:scaleX(1.5);
transform:scaleY(1.5);
放大中心位置的变换
transform-origin:left top; //改变中心点的位置，默认为center
//left center right center……
2D旋转
transform:rotate(10deg); //顺时针旋转 ==rotateZ()
正值为顺时针旋转，负值为逆时针旋转。
rotateX，rotateY为三维轴中的X轴和Y轴进行旋转。
折扇效果示例
<!--
* @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
* @Date: 2023-03-07 17:04:18
* @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
* @LastEditTime: 2023-03-07 20:53:59
* @FilePath: \vscode\guodu.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
ul{
list-style: none;
}
ul{
margin: 10px auto;
width: 600px;
height: 400px;
border: 5px solid gray;
}
li{
width: 60px;
height: 200px;
position: absolute;
left:50%;
margin-left: -30px;
bottom: 30px;
text-align: center;
transform-origin: bottom center;
border-radius: 15px;
transition: all 2s;
}
ul li:not(:nth-child(7)){
opacity: 0;
}
ul:hover li{
opacity: 1;
}
ul li:nth-child(1),ul li:nth-child(13){
background: purple;
}
ul li:nth-child(2),ul li:nth-child(12){
background: rgb(0, 100, 139);
}
ul li:nth-child(3),ul li:nth-child(11){
background: deeppink;
}
ul li:nth-child(4),ul li:nth-child(10){
background: darkcyan;
}
ul li:nth-child(5),ul li:nth-child(9){
background: rgb(128, 73, 0);
}
ul li:nth-child(6),ul li:nth-child(8){
background: darkorange;
}
ul li:nth-child(7){
background: red;
}
ul:hover li:nth-child(1){
transform: rotate(90deg);
}
ul:hover li:nth-child(13){
transform: rotate(-90deg);
}
ul:hover li:nth-child(2){
transform: rotate(75deg);
}
ul:hover li:nth-child(12){
transform: rotate(-75deg);
}
ul:hover li:nth-child(3){
transform: rotate(60deg);
}
ul:hover li:nth-child(11){
transform: rotate(-60deg);
}
ul:hover li:nth-child(4){
transform: rotate(45deg);
}
ul:hover li:nth-child(10){
transform: rotate(-45deg);
}
ul:hover li:nth-child(5){
transform: rotate(30deg);
}
ul:hover li:nth-child(9){
transform: rotate(-30deg);
}
ul:hover li:nth-child(6){
transform: rotate(15deg);
}
ul:hover li:nth-child(8){
transform: rotate(-15deg);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</body>
</html>
