CSS의 2D 변환에 대한 요약 공유-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 2D 변환에 대한 요약 공유

黄舟

Aug 11, 2017 pm 01:25 PM

css공유하다

CSS의 2D 변환 형식은 다음과 같습니다.

选择器{
transform：转换函数（参数，参数）；
}

여기서 변환(_{은 transfrom}이 아닌 변환)은 요소의 2D 또는 3D 변환을 정의합니다.

2D 변환 기능은 다섯 가지 범주로 나뉩니다. :

translate()는 변위 기능을 정의합니다. 다음 매개변수는 x축과 y축을 기준으로 한 오프셋 거리(픽셀 단위)입니다. 이동(30px, 30px); x축과 y축으로 30픽셀 이동(음수 값일 수 있음). 이는 역방향 오프셋을 나타냅니다.

rotate() 회전 기능을 정의합니다. 주어진 각도만큼 시계 방향으로 회전하도록 요소를 정의합니다. , 음수 값을 허용하면 요소가 시계 반대 방향으로 회전합니다. 단위는 회전(30deg) 형식이며 음수 값은 시계 반대 방향 선택을 나타냅니다. scale()은 지정된 너비(X축) 및 높이(Y축) 매개변수에 따라 크기 조정 기능을 정의합니다. 요소의 크기가 조정되며 단위는 배수입니다. 형식은 scale(2,2)을 의미합니다. 요소는 원래 크기에 따라 x축과 y축에서 2배 확대됩니다. 음수일 수 있으며 회전을 나타냅니다. 지정된 (X축, Y축) 매개변수 단위는 각도 deg이고 형식은 요소가 x에 있음을 나타냅니다. 축의 y축 방향이 30도만큼 편향됩니다. ; 역방향 편향을 나타내는 음수일 수 있습니다.
예:

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>演示2D转换</title>
        <style type="text/css">
            #fr{
                width: 500px;
                height: 400px;
                border: 1px solid green;
                margin: 20px auto;
                overflow: hidden;
            }
            .ch{
                width: 80px;
                height: 80px;
                border: 1px solid black;
                margin: 10px;
                
            }
            #fr p:first-child{
                transform: translate(100px,0px);
                -moz-transform: translate(100px,0px);
                -webkit-transform: translate(100px,0px);
                -o-transform: translate(100px,0px);
                -ms-transform: translate(100px,0px);
                
            }
            #fr p:nth-child(2){
                background-color: gray;
                transform: rotate(30deg);
                -webkit-transform: rotate(30deg);
            }
            #fr p:nth-child(3){
                background-color: greenyellow;
                transform: scale(1.5,1.5) translate(100px)            }
            #fr p:last-child{
                transform:  skew(30deg,20deg);
                background-color: springgreen;
            }
        </style>
    </head>
    <body>
        <p id="fr">
            <p class="ch"></p>
            <p class="ch"></p>
            <p class="ch"></p>
            <p class="ch"></p>
                
            </p>
        </p>
    </body></html>

브라우저 구문 분석 페이지:

첫 번째 직사각형 p는 원래 위치(X축)를 기준으로 100px 이동했습니다.

세 번째 직사각형 p는 원래 위치를 기준으로 100px 이동하고 x축과 y축을 따라 1.5배 확대됩니다.

네 번째 직사각형 p는 x축, y축에 있습니다. -축 방향이 각각 30도 및 20도 반전되었습니다.

여기서 기능의 변위, 회전 및 반전은 각 기능에 고유한 기본 상대 위치가 있으며 이는 또한 우리의 지각 인식과 일치합니다.

rotation

요소의 기준점 위치를 수정하려면 변환 원점 함수를 사용하여 정의할 수 있습니다.

양식: 변환-원점:20% 40%(대괄호 또는 "," 구분이 없음) ; 는 상대 편향 위치를 나타냅니다. 이전 위치를 기준으로 x축과 y축을 따라 20%, 40% 이동합니다. w3c 페이지에서 이를 잘 보여줍니다.

기본 위치는 요소의 중심을 기준으로 회전하며, 이는 기본 위치입니다.

변환 원본: 50

% 50%

왼쪽 위 모서리를 기준으로 회전합니다. 요소의 경우 매개변수를 사용하여 변환 원점: 0% 0%, 오른쪽 하단 모서리에 변환 원점: 100% 100% 등을 사용할 수도 있습니다. ; 정의하다.

브라우저 호환성 문제: 새 버전의 브라우저는 이전 버전의 브라우저(Chrome 및 Safari에는 접두사 -webkit- 필요)와의 호환성 문제를 방지하기 위해 변환으로 정의된 2D 변환을 지원하는 것으로 보입니다. 웹사이트 방문자가 사용하는 브라우저가 얼마나 오래되었는지 알 수 없기 때문에 호환성 처리가 필요합니다!

ie 브라우저: -ms-transform:chrome 및 Safari 브라우저: -webkit-transform:

Opera 브라우저: -o-transform:

Firefox 브라우저: -moz-transform:

위 내용은 CSS의 2D 변환에 대한 요약 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는