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

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

315  

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

이름
비밀번호
자동등록방지
분류 제목 조회
intro CSS - 정의와 장점 + CSS 기본 문법
2,808
2,808
intro CSS - 발전사 (CSS1 → .01 → CSS3)
1,841
1,841
intro CSS - 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 + 속성 …
7,020
7,020
selector CSS - 선택자 (Selector) 종류
2,530
2,530
selector CSS - ID선택자 (= 아이디선택자) , class선택자(= 클래스선택자) + CSS적용 우선순위 ★★★…
3,751
3,751
selector CSS - * 전체선택자 - 모든요소 (요소선택자)
1,747
1,747
selector CSS - element 요소선택자 - 지정요소 (요소선택자)
1,467
1,467
selector CSS - element,element 병렬선택자 ★ - 나열된요소 (= 여러요소, 요소선택자)
2,526
2,526
목록

방문자 수

오늘 480
어제 955
최대 1,698
전체 579,485
Since 2012