CSS3의 모바일 속성 분석-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3의 모바일 속성 분석

不言

Jun 26, 2018 pm 02:10 PM

css3 transform

이 글은 주로 CSS3 학습 시리즈의 모바일 속성에 대한 자세한 설명을 소개하고 있습니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

transform 함수

scaling

sacle 방법을 사용하여 매개변수에 배율 인수를 지정합니다. 예를 들어 sacle(0.5)는 50% 감소를 의미합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale方法使用示例</title>
    <style>
        p {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: scale(0.5);
            -moz-transform: scale(0.5);
            -o-transform: scale(0.5);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

로그인 후 복사

또한 요소의 가로 배율과 세로 배율을 각각 지정할 수 있습니다. 예는 다음과 같습니다.

Tilt

텍스트 또는 이미지의 기울기 처리를 수행하려면 매개변수에서 각각 수평 방향의 기울기 각도와 수직 방향의 기울기 각도를 지정하십시오. 예를 들어 "skew(30deg,30deg)"는 수평 방향으로 30도 기울임을 의미합니다. 방향과 수직 방향으로 30도의 기울기는 다음과 같습니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale方法使用示例</title>
    <style>
        p {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: scale(0.5,2);
            -moz-transform: scale(0.5,2);
            -o-transform: scale(0.5,2);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

로그인 후 복사

Rotate

요소를 회전하려면 회전 메서드를 사용하세요. 단위 deg는 각도를 의미하며, 양수는 시계 방향 회전을 의미하고, 음수는 시계 반대 방향 회전을 의미합니다. 예시는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>skew方法使用示例</title>
    <style>
        p {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: skew(30deg, 30deg);
            -moz-transform: skew(30deg,30deg);
            -o-transform: skew(30deg,30deg);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

로그인 후 복사

Move

번역 메소드를 사용하여 텍스트나 이미지를 이동하고, 매개변수에 가로 방향의 이동 거리와 세로 방향의 이동 거리를 지정합니다. . 예:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对元素使用多重变形的示例</title>
    <style>
        p {
            margin: 100px;
            width: 300px;
            background-color: yellow;
            text-align: center;
            -webkit-transform:rotate(30deg);
            -moz-transform:rotate(30deg);
            -o-transform:rotate(30deg);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

로그인 후 복사

변환 예

예 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate方法使用示例</title>
    <style>
        p {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: translate(50px,50px);
            -moz-transform: translate(50px,50px);
            -o-transform: translate(50px,50px);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

로그인 후 복사

이 예는 먼저 이동한 다음 회전하고 마지막으로 크기를 조정합니다.

효과:

예 2 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对元素使用多重变形的示例</title>
    <style>
        p {
            width: 300px;
            background-color: yellow;
            text-align: center;
            -webkit-transform: translate(150px,200px) rotate(45deg) scale(1.5);
            -moz-transform: translate(50px,50px) rotate(45deg) scale(1.5);
            -o-transform: translate(50px,50px) rotate(45deg) scale(1.5);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

로그인 후 복사

먼저 회전하고 크기를 조정하고 마지막으로 이동합니다.

효과:

두 예의 실행 결과에서 두 페이지에 있는 요소의 위치를 볼 수 있습니다. 동일하지 않습니다. 자세한 단계를 살펴보겠습니다.

첫 번째 예:

1) 먼저 오른쪽으로 150px, 아래로 200px 이동합니다.

2) 그런 다음 45도 회전하여 1.5배 확대합니다.

두 번째 예:

1) 먼저 45도 회전하고 1.5배 확대합니다.

2) 그런 다음 오른쪽으로 150px, 아래로 200px 이동합니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

자바 튜토리얼

1664

Cakephp 튜토리얼

1423

라라벨 튜토리얼

1321

PHP 튜토리얼

1269

C# 튜토리얼

1249

Related knowledge

순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예) Jun 28, 2022 pm 01:39 PM

순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.

CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함) Jul 19, 2022 am 11:28 AM

이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.

CSS를 사용하여 요소의 회전 배경 애니메이션 효과를 얻는 방법 Nov 21, 2023 am 09:05 AM

CSS를 사용하여 요소의 회전 배경 이미지 애니메이션 효과를 구현하는 방법 배경 이미지 애니메이션 효과는 웹 페이지의 시각적 매력과 사용자 경험을 향상시킬 수 있습니다. 이 문서에서는 CSS를 사용하여 요소의 회전 배경 애니메이션 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 배경 이미지를 준비해야 합니다. 배경 이미지는 태양 사진이나 선풍기 등 원하는 사진이면 됩니다. 이미지를 저장하고 이름을 "bg.png"로 지정합니다. 다음으로, HTML 파일을 생성하고 파일에 div 요소를 추가하여 다음과 같이 설정합니다.

공간을 차지하지 않고 CSS에서 요소를 숨기는 방법 Jun 01, 2022 pm 07:15 PM

두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.

CSS3에서 레이스 테두리를 구현하는 방법 Sep 16, 2022 pm 07:11 PM

CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.

텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다! Jun 10, 2022 pm 01:00 PM

텍스트 회전판과 이미지 회전판을 만드는 방법은 무엇입니까? 누구나 가장 먼저 생각하는 것은 js를 사용할지 여부입니다. 실제로 순수 CSS를 사용하여 구현하는 방법도 모두에게 도움이 되기를 바랍니다.

CSS3에서 마우스를 클릭하여 이미지를 확대하는 방법 Apr 25, 2022 pm 04:52 PM

구현 방법: 1. ":active" 선택기를 사용하여 그림에 대한 마우스 클릭 상태를 선택합니다. 2. 변환 속성과 scale() 함수를 사용하여 그림 확대 효과를 얻습니다. 구문은 "img:active {transform; : scale(x축 배율, y축 배율);}".

Vue에서 이미지를 압축하고 형식을 지정하는 방법은 무엇입니까? Aug 25, 2023 pm 11:06 PM

Vue에서 이미지를 압축하고 형식을 지정하는 방법은 무엇입니까? 프런트 엔드 개발에서는 이미지를 압축하고 형식을 지정해야 하는 경우가 종종 있습니다. 특히 모바일 개발에서는 페이지 로딩 속도를 높이고 사용자 트래픽을 절약하기 위해 이미지를 압축하고 포맷하는 것이 중요합니다. Vue 프레임워크에서는 일부 도구 라이브러리를 사용하여 이미지를 압축하고 형식을 지정할 수 있습니다. 압축기.js 라이브러리를 사용한 압축 압축기.js는 이미지 압축을 위한 JavaS입니다.

See all articles

CSS3의 모바일 속성 분석

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제