Transform
회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.
transform
Transform: 속성
1.scale(확대할비율), 따로사용가능 scaleX(),scaleY()
2.translate(X,Y)이동할 위치, 따로사용가능 translateX() and translateY()
3.rotare(회전수turn or 각도deg )
사용예제)
마우스를 올리면 180도회전 두배로커짐
<style>
body {
background: #333;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box {
background: white;
width: 300px;
height: 300px;
/* Transform - rotate, scale, skew */
/* transform: rotate(25deg); */
/* transform: skew(25deg); */
/* transform: scale(2); */
transition: all 1s ease-in-out;
}
.box:hover {
transform: rotate(180deg) scale(2);
background-color: cyan;
border-radius: 50%;
transform: translate(100px, 100px);
/* transform: skew(25deg); */
/* transform: scale(2); */
/* border-radius: 50%;
background-color: blue; */
/* transform: translateY(100px); */
/* transform: translateX(-100px); */
/* x & y */
/* transform: translate(100px, 100px); */
/* transform: translate3d(100px, 100px, 100px); */
}
</style>
</head>
<body>
<div class="box"></div>
</body>Transitions
효과의 지속시간
