728x90
반응형
SMALL
transform
- 2차원 좌표에서 요소를 변형시키는 속성
translate: 이동
rotate: 회전
scale: 확대, 축소
skew: 경사, 비틀기
#translate{
background-color: deeppink;
transform: translate(30px, 50px);
}
#rotate {
transform: rotate(60deg);
background-color: gold;
}
#scale {
transform: scale(1.5, 1.2);
background-color: orange;
}
#skew {
transform: skew(30deg, 15deg);
/*(x축의 기울기 각도, y축의 기울기 각도)*/
background-color: yellowgreen;
✔ 벤더 프리픽스(vender prefix)
- 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기
위해 사용하는 접두사
- w3c css 권고한에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을
사용할 때 붙임
-webkit- : 크롬, 엣지를 위한 접두사
-o- : 오페라를 위한 접두사
-ms- : 익스플로러를 위한 접두사
-moz- : 파이어폭스를 위한 접두사
- 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는
가장 마지막에 작성해야 함
#gradient {
background: pink;
/*(크롬,엣지를 위한 코드)*/
background: -webkit-linear-gradient(left, pink, gray);
/*(오페라를 위한 코드)*/
background: -o-linear-gradient(left, pink, gray);
/*(익스플로어를 위한 코드)*/
background: -ms-linear-gradient(left, pink, gray);
/*(파이어폭스를 위한 코드)*/
background: -moz-linear-gradient(left, pink, gray);
/*(css 표준문법 코드)*/
background: linear-gradient(left, pink, gray);
transition
- 요소에 추가할 css스타일 전환 효과를 설정
- 추가할 전환 효과나 지속시간도 설정
property: 요소에 추가할 전환 효과를 설정
timing-function: 전환효과의 값을 설정
linear: 처음부터 끝까지 일정한 속도로
ease: 전환효과가 천천히 -> 빨라지고 -> 천천히 -> 끝
duration: 전환효과를 나타내는 시간을 설정
delay: 설정한 시간만큼 대기하다 전환효과를 나타냄
<style>
div {
width: 100px;
height: 100px;
float: left;
margin: 30px;
}
#bg-tr {
background-color: gold;
transition: background-color ease 2s;
}
#bg-tr:hover {
background-color: red;
}
#border-tr {
background-color: deeppink;
border: 3px dotted black;
transition: all linear 2s;
}
#border-tr:hover {
background-color: pink;
border: 3px dotted gray;
border-radius: 50%;
}
</style>
728x90
반응형
LIST
'CSS' 카테고리의 다른 글
| CSS-animation (0) | 2023.04.03 |
|---|---|
| CSS-레이아웃(Layout) (2) | 2023.03.30 |
| CSS- Background, Display (0) | 2023.03.29 |
| CSS-font (0) | 2023.03.29 |
| CSS- 컬러와 텍스트 (0) | 2023.03.28 |