간단한 설명: CS3의 점차적인 변화와 2D 변환

6486 단어 CSS3
카탈로그
  • 1. CSS3 그래디언트
  • 1.1 선형 그래디언트
  • 1.2 레이디얼 그라데이션
  • 1.3 반복 선형 그래디언트
  • 1.4 반복 레이디얼 그라데이션
  • 2. CSS3의 2D 변환
  • 2.1 transform
  • 2.2 rotate() 방법
  • 2.3 skew () 방법
  • 2.4 scale() 방법
  • 2.5translate() 방법
  • 3. CSS3 변환
  • 3.1 transition
  • 3.2 pointer-events
  • 3.3 backface-visibility

    • 1. CS3 그라데이션
    CSS3 Gradient는 (linear)와 (radial)로 나뉜다.렌더링 엔진에 따라 점차적인 문법이 다르다
    1.1 선형 그래디언트
  • 문법: 
    • background: linear-gradient(direction, color-stop1, color-stop2, ...);

    참고:
  • direction: 기본값to bottom, 즉 위에서 아래로 점차적인 변화;
  • stop: 색깔의 분포 위치를 가리키며 기본적으로 고르게 분포한다. 만약에 3개의 색깔이 있다면 각 색깔의 stop은 모두 33.33% 이다.

    • 각도
    영자
    역할
    0deg
    to top
    아래에서 위로
    90deg
    to right
    왼쪽에서 오른쪽으로
    180deg
    to bottom
    위에서 아래로
    270deg
    to left
    오른쪽에서 왼쪽으로
    to top left
    아래쪽부터 왼쪽 위쪽까지 있어요.
    totopright
    왼쪽 아래에서 오른쪽 상단까지
    1.2 레이디얼 그라데이션
  • 문법: 
    • background: radial-gradient(center, shape, size, start-color, ..., last-color);

    참고:
  • center: 그래디언트 시작점의 위치는 백분율로 할 수 있으며 기본적으로 도형의 정중심입니다.
  • shape: 점차적으로 변하는 모양,ellipse는 타원형,circle는 원형을 나타낸다.기본값은 엘리프입니다. 원소의 모양이 정사각형인 원소라면 엘리프는circle와 같습니다.
  • size: 점차적인 크기, 즉 점차적인 크기가 어디에 멈추는지 네 가지 값이 있습니다.
  • closest-side: 가장 가까운 쪽;farthest-side: 가장 먼 쪽;closest-corner: 최근 각;farthest-corner:최원각.

    • 1.3 반복 선형 그래디언트
  • repeating-linear-gradient () 함수는 선형 점차적인 변화를 반복하는 데 사용됩니다
  • 문법: 
    • background: repeating-linear-gradient(red, red 10%, balck 20%);

    주의: 10%의 위치는 레드, 20%의 위치는 블랙, 그리고 이 20%에 따라 아래로 반복
    1.4 반복 레이디얼 그라데이션
  • repeating-radial-gradient () 함수는 중복 선형 점차적 변화에 사용
  • 문법: 
    • background: repeating-radial-gradient(red, red 10%, black 20%);

    2. CSS3의 2D 변환
    2.1 transform
  • rotate(): 회전 함수(수치 도수)
  • Transform-origin: 회전의 기준점
  • skew(): 경사 함수(수치 도수(비뚤어짐)
  • skewX() skewY()

  • scale(): 축소 함수(값의 양수, 음수와 소수)
  • scaleX()scaleY()

  • translate(): 변위 함수
  • translateX()translateY()


    • 2.2 rotate () 방법
  • 단위: deg
  • rotate() 방법을 통해 원소가 시계 방향으로 주어진 각도를 회전한다.음수 값을 허용하면 요소가 반시계 방향으로 회전합니다.
  • 예를 들어 값rotate(30deg)는 원소를 시계 방향으로 30도 회전시키는 것이다
    • 2.3 skew() 메서드
  • skew() 방법으로 원소가 주어진 각도를 회전(기울기/비틀기)하고 주어진 수평선(X축)과 수직선(Y축) 파라미터
    • 에 따라
  • 예: 값skew(30deg, 20deg)는 X축을 둘러싸고 원소를 30도, Y축을 둘러싸고 20도 뒤집는 것이다.

    • 2.4 scale () 방법
  • scale() 방법으로 원소의 사이즈가 증가하거나 감소하며 주어진 너비(X축)와 높이(Y축) 파라미터에 따라
  • 예: 값 scale(2,4)는 너비를 원시 사이즈의 2배, 높이를 원시 높이의 4배로 바꾸는 것이다.

    • 2.5 translate () 방법
  • translate() 방법을 통해 원소가 현재 위치에서 이동하고 주어진left(x좌표)와 top(y좌표)의 위치 매개 변수
    • 에 따라
  • 예: 값translate(50px, 100px)는 원소를 왼쪽에서 50픽셀을 이동하고 맨 위에서 100픽셀을 이동한다.

    • 3. CSS3 변환
    ① CS3에서는 Flash 애니메이션이나 JavaScript를 사용하지 않고 요소가 한 스타일에서 다른 스타일로 바뀔 때 효과를 추가할 수 있습니다.
  • Internet Explorer 10, Firefox, Chrome 및 Opera는transition 속성을 지원합니다.
  • Safari는 접두사-webkit-가 필요합니다.
  • 주: 인터넷 Explorer 9 및 이전 버전은transition 속성이 지원되지 않습니다.Chrome 25 및 이전 버전은 접두사 - 웹키트가 필요합니다.

    • 3.1 transition
  • transition-property운동할 스타일(all||[attr]||none)
  • transition-duration운동시간
  • transition-delay 지연 시간
  • transition-timing-function운동형식
  • ease: (점점 느려짐) 기본값
  • linear: (균일속도)
  • ease-in: (가속)
  • ease-out: (감속)
  • ease-in-out: (가속 후 감속)

    • 3.2 pointer-events
    pointer-events 포인터 이벤트로 직역
    pointer-events：auto/none

    none으로 설정되면 다음과 같은 관련 특성이 있습니다.
  • 사용자의 클릭 동작이 어떠한 효과도 발생하지 않도록 차단
  • 기본 마우스 포인터가 표시되지 않도록 차단
  • CSS에서 hover와 active 상태의 변화가 이벤트를 촉발하는 것을 막는다
  • JavaScript 클릭 동작의 트리거를 막는 이벤트
    • 3.3 backface-visibility
    backface-visibility 속성 정의 요소가 화면에 보이지 않을 때 볼 수 있는지 여부
    backface-visibility: visible|hidden;
// visible       
// hidden
    최적화 문제 - 경사도 하강 (Gradient Descent) 알고리즘 & 샘플 코드 및 관련 확장
    간단한 자바스크립트 시계!

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage