Top
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
* {
margin: 0;
padding-top: 0;
}
html,body {
width: 100%;
height: 100%;
}
body {
perspective: 1000px;
perspective-origin: 0 0;
/* origin을 기준으로 perspective 확대 축소가 적용됨 */
font: 12px 'Malgun Gothic',sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
}
#wrap .pic {
width: 300px;
}
#wrap .pic img {
width: 100%;
transition: all 1s;
transform-origin: 0 0;
}
#wrap .pic:hover img {
/*transform: translate(200px,100px);*/
/*transform: translateZ(300px);*/
/*transform: translate3d(300px, 100px, 300px);*/
/*transform: rotate3d(1,1,1,90deg);*/
/*transform: scaleZ(2) rotateY(90deg);*/
/*transform: skew(30deg,15deg);*/
/*transform: matrix(1.5,0,0,1.5,0,0)*/
/* scaleX skewY skewX scaleY translateX translateY */
transform: matrix3d();
}
</style>
</head>
<body>
<div id="wrap">
<div class="pic">
<img src="img/wendy5.png" alt="">
</div>
</div>
</body>
</html>
matrix
rotate
scale
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
* {
margin: 0;
padding-top: 0;
}
html,body {
width: 100%;
height: 100%;
}
body {
perspective: 1000px;
font: 12px 'Malgun Gothic',sans-serif;
}
.cube {
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: cube 3s linear infinite;
}
.cube:hover {
animation-play-state: paused;
}
.box {
position: absolute;
left: 0;
top: 0;
width:200px;
height: 200px;
color: #fff;
font: bold 100px/200px 'Trebuchet MS',sans-serif;
text-align: center;
opacity: .6;
}
#a {
transform: translateZ(100px);
z-index: 1;
background-color: #ff0000;
}
#b {
transform: translateX(100px) rotateY(90deg);
background-color: #810073;
}
#c {
transform: translateZ(-100px) rotateY(180deg);
background-color: #340081;
}
#d {
transform: translateX(-100px) rotateY(-90deg);
background-color: #004981;
}
#e {
transform: translateY(-100px) rotateX(90deg);
background-color: #00714d;
}
#f {
transform: translateY(100px) rotateX(-90deg);
background-color: #0d7100;
}
@keyframes cube {
0% {
transform: rotate3d(1,1,1,0deg);
}
100% {
transform: rotate3d(1,1,1,360deg);
}
}
</style>
</head>
<body>
<div class="cube">
<div class="box" id="a">1</div>
<div class="box" id="b">2</div>
<div class="box" id="c">3</div>
<div class="box" id="d">4</div>
<div class="box" id="e">5</div>
<div class="box" id="f">6</div>
</div>
</body>
</html>
XYZ 축을 활용해서 transform으로 만든 3d 애니메이션
움짤은 좀 끊기는데 실제로 보면 너무 부드러워서 좀 충격적이었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>filter</title>
<style>
body {
font: 12px 'Malgun Gothic',sans-serif;
}
#wrap:after {
content: '';
display: block;
clear: both;
}
#wrap {
width: 900px;
margin: 0 auto;
}
.filter {
float: left;
width: 300px;
border: 2px solid;
box-sizing: border-box;
}
.filter img {
width: 100%;
transition: all 1s;
cursor: pointer;
}
.filter.blur img:hover {
filter: blur(5px);
}
.filter.brightness img:hover {
filter: brightness(2);
}
.filter.contrast img:hover {
filter: contrast(3);
}
.filter.drop-shadow img:hover {
filter: drop-shadow(-30px 20px 4px rgba(0,0,0,.4));
}
.filter.hue-rotate img:hover {
filter: hue-rotate(360deg);
}
.filter.grayscale img:hover {
filter: grayscale(1);
}
.filter.invert img:hover {
filter: invert(1);
}
.filter.opacity img:hover {
filter: opacity(.5);
}
.filter.sepia img:hover {
filter: sepia(1);
}
}
.filter strong {
display: block;
padding: .3em .5em;
}
</style>
</head>
<body>
<div id="wrap">
<div class="filter blur">
<img src="img/wendy5.png" alt="">
<strong>blur</strong>
</div>
<div class="filter brightness">
<img src="img/wendy5.png" alt="">
<strong>brightness</strong>
</div>
<div class="filter contrast">
<img src="img/wendy5.png" alt="">
<strong>contrast</strong>
</div>
<div class="filter drop-shadow">
<img src="img/wendy5.png" alt="">
<strong>drop-shadow</strong>
</div>
<div class="filter hue-rotate">
<img src="img/wendy5.png" alt="">
<strong>hue-rotate</strong>
</div>
<div class="filter grayscale">
<img src="img/wendy5.png" alt="">
<strong>grayscale</strong>
</div>
<div class="filter invert">
<img src="img/wendy5.png" alt="">
<strong>invert</strong>
</div>
<div class="filter opacity">
<img src="img/wendy5.png" alt="">
<strong>opacity</strong>
</div>
<div class="filter sepia">
<img src="img/wendy5.png" alt="">
<strong>sepia</strong>
</div>
</body>
</html>
filter효과 9가지
굳이 포토샵이나 일러 안거치고 css에서 바로 어느정도 편집이 가능하고
일단 결과물의 차이도 없고 훨씬 가볍다.
확실히 인터랙션이 가능한 영역으로 오니까
좀 더 와닿고 어떻게 써야될지
내가 전에 xd로 노가다하던 것들을 어떻게 표현해야될지 좀 감이 온다.
그리고 놀랍게도 너무너무너무너무너무 가볍고 부드러워서 충격적이다.
확실히 인터랙션이 생기니까 재미도 있고 바로바로 시각적으로 오는게 있어서 동기부여도 되는 것 같다.
이제 코딩도 재미 붙혀서 열심히 해봐야겠다.
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 027 웹사이트 예제 실습 (1) html 마크업 (0) | 2021.03.15 |
|---|---|
| 026 media query 반응형 웹, 반응형 웹페이지 예제 실습 (0) | 2021.03.09 |
| 024 CSS3 공부 (3) transition, transform, animation (0) | 2021.03.04 |
| 023 CSS3 공부 (2) multi columns, rounded box, box-sizing, flex (0) | 2021.03.02 |
| 022 CSS3 공부 (1) css3 선택자, 그림자,말줄임,투명도 지정 (0) | 2021.02.25 |
Daily Study/Web Dev
