<div class="container">
<div class="wrap">
<div class="box translate">
<p>이동합니다</p>
</div>
</div>
<div class="wrap">
<div class="box scale">
<p>확대 및 축소</p>
</div>
</div>
<div class="wrap">
<div class="box skew">
<p>기울여집니다</p>
</div>
</div>
<div class="wrap">
<div class="box rotate">
<p>돌아갑니다</p>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.wrap {
display: inline-block;
margin: 40px;
width: 150px;
height: 150px;
background-color: #ddd;
border-radius: 5%;
}
.box {
width: 150px;
height: 150px;
background-color: tomato;
border-radius: 5%;
color: #fff;
text-align: center;
font-weight: 600;
}
p {
position: relative;
top: 60px;
}
.translate {
transform: translate(0, 0);
}
.scale {
transform: scale(1);
}
.skew {
transform: skew(0, 0);
}
.rotate {
transform: rotate(0);
}
.translate:hover {
transition: 2s;
transform: translate(40px, 20px);
}
.scale:hover {
transition: 2s;
transform: scale(0.5);
}
.skew:hover {
transition: 2s;
transform: skew(20deg, 10deg);
}
.rotate:hover {
transition: 2s;
transform: rotate(70deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.