• 이용 문의
  • 회원가입
  • 로그인

[func] CSS3 - cubic-bezier () 함수 - 입방체 베지에곡선 (=베지어곡선 = 부드러운곡선) 정의.

cubic-bezier () 함수 기본예제

 

<style> 

div {

  width: 200px;

  padding: 50px;

  text-align:center;

  background: yellow;

  transition: width 2s;

  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

}


div:hover {

  width:320px;

}

</style>


<div>홈짱닷컴 Homzzang.com</div>

 

결과보기

 

 

베지에 곡선(= 베지어 곡선 bezier curves)


1.

부드러운 곡선. (컴퓨터 그래픽에서 널리 사용)

2.
프랑스의 자동차 제조사 르노사의 기술자인 피에르 베지에가
1962년 자동차 몸체 디자인에 사용하면서부터 널리 알려짐.

더 자세히 보기

 

 

 

cubic-bezier () 함수 정의 및 사용법

 

1.
Cubic Bezier 곡선을 정의

 

2.

큐빅 베 지어 곡선은 P0, P1, P2 및 P3의 4 개 점으로 정의.

 

3.

P0와 P3은 곡선의 시작과 끝이고, 

CSS에서는 좌표가 비율이므로 고정되어 있음. 


4.
P0는 (0, 0)이며 초기 시간과 초기 상태를 나타내며
P3은 (1, 1)이며 최종 시간과 최종 상태를 나타냄.

 

5.

cubic-bezier () 함수는 아래 속성과 함게 사용 가능.
animation-timing-function 속성
transition 속성
transition-timing-function 속성

 

6.

CSS3

 

7.

IE 10 이상 주요 최신 브라우저 지원

 

 

 

cubic-bezier () 함수 구문

 

 

cubic-bezier(x1,y1,x2,y2)

 

 

[매개변수]

x1, y1, x2, y2
필수. 숫자 값. x1과 x2는 0 ~ 1 사이의 숫자여야 함.

 

 

관련 좌표

https://matthewlein.com/tools/ceaser

https://kutar37.tistory.com/entry/CSS-cubic-bezier%EB%9E%80

즐겨찾기 (= 북마크) : Ctrl + D

이름
비밀번호
자동등록방지
Hz패밀리 가입선물 이벤트 종료
분류 제목
intro CSS - 정의와 장점 + CSS 기본 문법
intro CSS - 발전사 (CSS1 → .01 → CSS3)
intro CSS - 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 + 속성 …
selector CSS - 선택자 (Selector) 종류
selector CSS - 아이디(id) , 클래스(class) 선택자 + CSS적용 우선순위 ★★★★★
selector CSS - 전체선택자 (*)
selector CSS - 요소선택자 (요소)
selector CSS - 병렬선택자 (요소,요소) ★ - 요소 여러개 나열
selector CSS - 자손선택자 (요소 요소) ★ - 특정 요소 아래의 모든 자손 요소
selector CSS - 자식선택자 (요소>요소) ★★ - 요소 바로 아래에 있는 자식요소만 : (IE7)
selector CSS - 인접선택자 (요소+요소) ★★ - 앞요소에 입접한 뒤형제요소 : (IE7)
selector CSS - 속성선택자 (요소[속성]) - 특정속성보유요소: (IE7)
selector CSS - 속성값선택자 (요소[속성=속성값 단어]) - 특정 속성값단어 보유 요소 : (IE7)
selector CSS - 속성값선택자 (요소[속성~=속성값 단어]) - 특정 속성값단어 (단독 또는 단어앞뒤공백)인 요소 …
목록

방문자 수

오늘 77
어제 573
최대 728
전체 502,941
Since 2012