공부하다가 복습 차,
재미 삼아 만들어본
만화경 사륜안.
코드는
중복과 더러움 그 자체.
뭔가 더 간결하고 쉽게
만드는 방법이 있을 것이다.
<body>
<style>
body {background: pink; padding:50%;}
div.a { width:200px; height:200px; border: 1px solid red;
background: red;
transition: all 1.5s;}
div.a:hover {transform: rotate(360deg); background: purple;}
div.b { width:200px; height:200px; border: 1px solid red;
background: red;
transform: rotate(45deg);
transition: all 1.5s;}
div.b:hover {transform: rotate(-180deg); background: purple;}
div.c { width:200px; height:200px; border: 1px solid red;
background: red;
transition: all 1.5s;
}
div.c:hover {border-radius: 200px; background: purple;}
div.d { width:200px; height:200px; border: 1px solid red;
background: red;
transition: border-radius 1.5s;
}
div.d:hover {border-radius: 0 200px 0 200px; background: purple;}
div.e { width:200px; height:200px; border: 1px solid red;
background: red;
transition: border-radius 1.5s;
}
div.e:hover {border-radius: 200px 0 200px 0; background: purple;}
div.f { width:200px; height:200px; border: 1px solid red;
background: red; transform: rotate(45deg);
transition: border-radius 1.5s;
}
div.f:hover {border-radius: 200px 0 200px 0; background: purple;}
div.g { width:200px; height:200px; border: 1px solid red;
background: red; transform: rotate(90deg);
transition: border-radius 1.5s;
}
div.g:hover {border-radius: 200px 0 200px 0; background: purple;}
</style>
<div class="a">
<div class="b">
<div class="c">
<div class="d">
<div class="e">
<div class="f">
<div class="g">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
728x90
반응형
'프로그래밍 > CSS' 카테고리의 다른 글
| 응용) transform-origin 응용 (0) | 2020.05.06 |
|---|---|
| css3 기초 선택자 응용 실습 (0) | 2020.05.05 |
| 기초) transform 2 (skew / translate) 정리 (0) | 2020.05.04 |
| 기초) transform 1 (rotate / scale) 정리 (0) | 2020.05.03 |
| 기초) flex 속성 정리 (0) | 2020.05.01 |