前言
好好看,好好学
一、简单用法
translate(),根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
rotate(),在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
scale(),该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
二、使用步骤
HTML代码如下(示例):
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
CSS代码如下(示例):
<style>
main {
width: 300px;
height: 300px;
transform: translate(50%, 50%);
border-radius: 50%;
position: relative;
background-color: red;
}
div {
width: 50px;
height: 50px;
background-color: red;
border-radius: 0 50%/0 100% 100%;
position: absolute;
top: 0;
left: 0;
line-height: 200px;
color: aqua;
transition-duration: 1s;
transform-origin: 150px 150px;
transform: scale(0);
transition: 2s;
}
div::after {
content: "CSS";
}
main::after {
content: '';
width: 200px;
height: 200px;
color: red;
border-radius: 50%;
}
main:hover div:nth-child(1) {
transform: scale(1) rotate(40deg);
}
main:hover div:nth-child(2) {
transform: scale(1) rotate(80deg);
}
main:hover div:nth-child(3) {
transform: scale(1) rotate(120deg);
}
main:hover div:nth-child(4) {
transform: scale(1) rotate(160deg);
}
main:hover div:nth-child(5) {
transform: scale(1) rotate(200deg);
}
main:hover div:nth-child(6) {
transform: scale(1) rotate(240deg);
}
main:hover div:nth-child(7) {
transform: scale(1) rotate(280deg);
}
main:hover div:nth-child(8) {
transform: scale(1) rotate(320deg);
}
main:hover div:nth-child(9) {
transform: scale(1) rotate(360deg);
}
</style>
总结
以上就是今天要讲的内容.