<!--
트랜지션(전환)은 사용자의 이벤트(클릭, 더블클릭, 드래그, 스크롤 등)가 없는 처음(시작)상태와 사용자의 이벤트가 있는 나중(끝)상태 사이의 모습을 자동으로 생성해준다.
transition-property: 트랜지션을 적용할 속성을 지정(all, width, height 등)
transition-duration: 진행 시간(ex> 0.4s)
transition-timing-function: 움직이는 시작과 끝의 속도를 지정(가속도)
transition-delay: 대기 시간
transition:property duration timing-function delay;
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transition</title>
<style>
/*박스의 처음 상태*/
div { width:300px; height:100px; margin:10px; background:#fc0; }
.box1 { transition:width 0.4s ease-in;}
.box2 { transition:width 0.4s ease-in 0.8s;}
.box3 { transition:height 0.4s ease-in;}
/*박스의 나중 상태*/
.box1:hover { width:1000px;}
.box2:hover { width:500px;}
.box3:hover { height:500px;}
h2{ margin-top:100px; text-transform:uppercase; text-align:center;}
.demo {
position: relative;
width: 700px; height: 500px; margin:30px auto;
background: #e8e8e8 ;border-right: 5px solid #900;
}
.demo div {
position: absolute; left: 0; width: 70px; height: 70px;
text-align: center; line-height: 70px;
border: 5px solid #00c; border-radius:50%;
}
.linear { top:0; transition:all 2s linear;}
.ease { top:100px; transition:all 2s ease 0.5s;}
.ease-in { top: 200px; transition:all 2s ease-in 1s;}
.ease-out { top: 300px; transition:all 2s ease-out 1.5s;}
.ease-in-out { top: 400px; transition:all 2s ease-in-out 2s;}
.demo:hover div { left:625px; transform:rotate(1080deg);}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<h2>transition-timing-function</h2>
<div class="demo">
<div class="linear">linear</div>
<div class="ease">ease</div>
<div class="ease-in">easein</div>
<div class="ease-out">easeout</div>
<div class="ease-in-out">easeinout</div>
</div>
</body>
</html>
----------------------------
<!--
트랜스폼 2D 함수: translate( ), translateX( ), translateY( ), rotate( ), skew( ), scale( )
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2D Transform</title>
<style>
*{margin:0; padding:0; box-sizing: border-box;}
.container {
position: relative;
width: 1000px; height:1000px; margin:0 auto;background:#f4f4f4;
}
.container div {
position: absolute;
width:200px; height:200px; margin:50px 0;
font-size:32px; color:#fff; text-align:center; line-height:200px;
background:#06f;
transition:all 0.4s ease-in;
}
.container:hover div:nth-child(1) { transform:translateX(800px);}
.container:hover div:nth-child(3) { transform:translateY(800px);}
.container:hover div:nth-child(2) { transform:translate(800px, 800px);}
.demo {
position: relative;
width: 1000px; height:1000px; margin:50px auto;background:#f4f4f4;
}
.demo div {
position: absolute;
width:200px; height:200px; margin:50px 0;
font-size:32px; color:#fff; text-align:center; line-height:200px;
background:#fc0;
transition:all 0.4s ease-in;
}
.demo div:nth-child(1) { top: 0; }
.demo div:nth-child(2) { top: 250px; }
.demo div:nth-child(3) { top: 500px; }
.demo:hover div:nth-child(1) { background:#06f; transform:translate(500px, 300px) scale(2.5) rotate(1080deg) skew(45deg, 0);}
.demo:hover div:nth-child(2) { transform:rotate(720deg);}
.demo:hover div:nth-child(3) { transform:skew(0, -30deg);}
button {
width: 120px; height: 40px;
font-size: 18px; text-align: center; line-height: 40px;
background: #888; border-radius: 20px; border: none;
}
.box { width: 300px; height: 300px; background: #030; transition:all 0.4s ease-in;}
.active { transform:scale(2) rotate(40deg) translate(200px, 100px); }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$('button').click(function( ) {
$('.box').addClass('active'); //클래스명을 추가하는 메서드
});
$('button').mouseover(function( ) {
$('.box').removeClass('active'); //클래스명을 삭제하는 메서드
});
});
//
혹은
$(document).ready(function(e) {
$('button').click(function( ) {
$('.box').toggleClass('active'); //클래스명 추가와 제거를 반복하는 메서드
});
});
//
</script>
</head>
<body>
<button>버튼</button>
<div class="box"></div>
<div class="container">
<div>translateX( )</div>
<div>translate( )</div>
<div>translateY( )</div>
</div>
<div class="demo">
<div>scale( )</div>
<div>rotate( )</div>
<div>skew( )</div>
</div>
</body>
</html>
-------------------------------
<!--
트랜스폼 3D 함수: translate3d(x,y,z), translateZ(z), rotate3d(x, y, z, deg)
perspective() : 원근감을 지정(:부모요소에 작성하면 자식요소에 적용, 손자 요소에는 적용 안 됨. > 자식요소에 transform-style:preserve-3d 를 작성하면 손자 요소에도 적용된다.)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D transform</title>
<style>
* {margin:0; padding:0;}
.clear { clear:both; }
ul {width:1000px; margin:50px auto; perspective:700px;}
ul li {
list-style:none; float:left;
width:280px; height:280px; margin:20px;
font-size:24px; color:#fff; text-align:center; line-height:300px;
background:#36f; opacity:0.4;/*60% 투명*/
border:5px solid #a6f;
transition:all 0.4s ease-in;
}
ul li:nth-child(1):hover {transform: rotate3d(1,0,0,-360deg);}
ul li:nth-child(2):hover {transform: rotate3d(0,1,0,-360deg) scale(2);}
ul li:nth-child(3):hover {transform: translateZ(-500px);}
</style>
</head>
<body>
<ul>
<li>rotate3d(x)</li>
<li>rotate3d(y)</li>
<li>rotate3d(z)</li>
</ul>
<div class="clear"></div>
</body>
</html>
'Coding' 카테고리의 다른 글
| CSS 선수학습(12) (0) | 2021.07.27 |
|---|---|
| CSS 선수학습(11) (0) | 2021.07.26 |
| CSS 선수학습(9) (0) | 2021.07.21 |
| CSS 복습/실습 (0) | 2021.07.20 |
| CSS 선수학습(8) (0) | 2021.07.19 |