「这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战」
transform的本意就是变换、使...变形的意思，在CSS3中transform属性其实就是用于设置元素某些属性的变换，比如放大缩小、平移、旋转等等。
transform:none表示无变换 关于2d变换的方法：transform:translate()表示平移 可以传递两个参数，也可以传递一个参数 传递两个参数，第一个参数表示水平平移，第二个表示垂直方向平移量，可以为负值。 传递一个参数时表示：水平方向平移量，垂直方向不偏移即为0
<head>
<style>
body{
background-color: #eee;
}
section{
width: 650px;
height: 550px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.wrapper {
width: 250px;
height: 100px;
background-color: #bbb;
transition: all 2s;
border: 1px solid deeppink;
}
.wrapper div{
width: 250px;
height: 100px;
text-align:center;
line-height: 100px;
font-size: .8em;
font-weight: bold;
background-color: pink;
}
.wrapper:nth-of-type(1) div{
transform:translate(50px,50px)
}
.wrapper:nth-of-type(2) div{
transform:translate(50px)
}
.wrapper:nth-of-type(3) div{
transform:translate(50%,50%)
}
.wrapper:nth-of-type(4) div{
transform:translate(50%)
}
.wrapper:nth-of-type(5) div{
transform:translate(-10px,-10px)
}
.wrapper:nth-of-type(6) div{
transform:translate(-10px)
}
</style>
</head>
<body>
<section>
<div class="wrapper">
<div>transform:translate(50px,50px)</div>
</div>
<div class="wrapper">
<div>transform:translate(50px)</div>
</div>
<div class="wrapper">
<div>transform:translate(50%,50%)</div>
</div>
<div class="wrapper">
<div>transform:translate(50%)</div>
</div>
<div class="wrapper">
<div>transform:translate(-10px -10px)</div>
</div>
<div class="wrapper">
<div>transform:translate(-10px)</div>
</div>
</section>
</body>
transform:translateX()表示单独平移水平方向transform:translateY()表示单独平移垂直方向
.wrapper:nth-of-type(1) div{
transform:translateX(50px)
}
.wrapper:nth-of-type(2) div{
transform:translateY(50px)
}
transform:rotate()表示旋转度数 可以是负值
.wrapper:nth-of-type(1) div{
transform:rotate(30deg)
}
.wrapper:nth-of-type(2) div{
transform:rotate(90deg)
}
.wrapper:nth-of-type(3) div{
transform:rotate(-30deg)
}
.wrapper:nth-of-type(4) div{
transform:rotate(-90deg)
}
transform:scale()表示缩放比例 可以传递两个参数，也可以传递一个参数 两个参数时分别表示水平方向的缩放比例、垂直方向缩放比例 如果只传递了一个参数，第二个参数等比缩放 当设置两个值一样时，相当于设置一个值
<head>
<style>
body{
background-color: #eee;
}
section{
margin-top: 100px;
width: 650px;
height: 400px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.wrapper {
width: 250px;
height: 100px;
background-color: #bbb;
transition: all 2s;
border: 1px solid deeppink;
}
.wrapper div{
width: 250px;
height: 100px;
text-align:center;
line-height: 100px;
font-size: .8em;
font-weight: bold;
background-color: pink;
}
.wrapper:nth-of-type(1) div{
transform:scale(.8,.8)
}
.wrapper:nth-of-type(2) div{
transform:scale(.8)
}
.wrapper:nth-of-type(3) div{
transform:scale(1.2,1.2)
}
.wrapper:nth-of-type(4) div{
transform:scale(1.2)
}
</style>
</head>
<body>
<section>
<div class="wrapper">
<div>transform:scale(.8,.8)</div>
</div>
<div class="wrapper">
<div>transform:scale(.8)</div>
</div>
<div class="wrapper">
<div>transform:scale(1.2,1.2)</div>
</div>
<div class="wrapper">
<div>transform:scale(1.2)</div>
</div>
</section>
</body>
