CSS에서 변위 번역()을 사용하는 방법은 무엇입니까? 번역 사용법 요약-CSS 튜토리얼-php.cn

CSS에서 변위 번역()을 사용하는 방법은 무엇입니까? 번역 사용법 요약

云罗郡主

풀어 주다： 2018-10-29 13:44:30

원래의

37217명이 탐색했습니다.

CSS3에서 번역을 어떻게 사용하나요? CSS에서 변위 번역()을 사용하는 방법은 무엇입니까? CSS를 배우는 일부 초보자가 직면할 수 있는 문제일 수 있습니다. 다음으로 CSS에서 변위 번역()을 사용하는 방법을 설명하겠습니다.

1: Translate() 사용법

CSS 스타일에서 많은 사람들은 이동을 표현하기 위해 번역()을 사용하는 것을 좋아합니다. 번역()에서 x와 y를 사용하여 수평 또는 수직 방향의 요소 이동을 나타낼 수 있습니다.

예: 1.translateY(y): 요소가 수직 방향(y축이라고 함)으로 이동한다는 의미입니다.

2.translateX(x): 요소가 수평 방향으로 이동한다는 의미입니다. 이것이 우리가 부르는 것입니다. 언급된 x축

2:translate() 구문

transform:translateX(x);或者transform:translateY(y);

로그인 후 복사

css3에서는 변환 속성의 변환 메소드가 모두 변환에 속하며 변환 프로세스를 나타내기 위해 변환을 추가해야 합니다. 요소가 가로 방향으로 이동한 거리를 px로 표시하고, x가 양수이면 요소가 가로 방향으로 오른쪽으로 이동했다는 의미입니다. 예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3位移translate()方法</title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            margin:100px auto;/*水平居中*/
            width:200px;
            height:100px;
            border:1px dashed silver;
        }
        /*设置当前元素样式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:translateX(50px);
            -webkit-transform:translateX(20px);  /*兼容-webkit-引擎浏览器*/
            -moz-transform:translateX(20px);     /*兼容-moz-引擎浏览器*/
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS에서 변위 번역()을 사용하는 방법은 무엇입니까? 번역 사용법 요약 요약: 변환:translateX(50px)는 이때 50px를 -50px로 변경하면 가로 방향으로 50px를 이동한다는 의미입니다. , 요소는 가로 방향의 반대 방향으로 50px 이동합니다.