CSS3 및 자바스크립트로 변환-PHP开发-php.cn

CSS3 및 자바스크립트로 변환

高洛峰

풀어 주다： 2016-11-30 16:23:03

원래의

1565명이 탐색했습니다.

JavaScript에서 WebkitTransform은 대략 변환과 동일합니다. 변환은 표준이며 WebkitTransform은 Webkit 브라우저에서 사용할 수 있습니다. js의 WebkitTransform은 CSS의 -webkit-transform 속성에 해당합니다.

CSS의 변환 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.

먼저 div를 이동하지 않는 코드를 살펴보세요.

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
        }
    </style><div id="hovertreetf">这是一个div，没有移动。何问起</div>

로그인 후 복사

CSS의 변환 속성은 div를 이동할 수 있습니다. 예를 들면 다음과 같습니다.

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
            transform: translateX(100px);
        }
    </style><div id="hovertreetf">这是一个div，使用css属性transform移动。何问起</div>

로그인 후 복사

여기서 변환:translateX(100px)는 ID가 hovertreetf인 div 요소가 수평으로 오른쪽으로 100픽셀 이동한다는 의미입니다.

js를 사용하여 div를 이동하는 변환 속성을 조작할 수도 있으며 효과는 위의 CSS를 사용한 것과 같습니다. 예:

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
        }
    </style><div id="hovertreetf">这是一个div，使用js操作transform移动。何问起</div>
    <script>
        document.getElementById("hovertreetf").style.transform = "translateX(100px)";
    </script>

로그인 후 복사

위에서 언급했듯이 WebkitTransform은 대략 변환과 동일하며 Webkit 브라우저에 적합합니다. js를 사용하여 WebkitTransform을 작동하면 div를 이동할 수도 있습니다. 예:

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
        }
    </style><div id="hovertreetf">这是一个div，使用js操作WebkitTransform移动。何问起</div>
    <script>
        document.getElementById("hovertreetf").style.WebkitTransform = "translateX(100px)";
    </script>

로그인 후 복사

WebkitTransform은 CSS의 -webkit-transform 속성에 해당합니다. 예:

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
            -webkit-transform: translateX(100px);
        }
    </style><div id="hovertreetf">这是一个div，使用css属性 -webkit-transform 移动。何问起</div>

로그인 후 복사

변환을 설정하기 위해 CSS만 사용하지만 js는 그렇지 않은 경우 이를 설정하면 js는 변환 속성을 가져옵니다. 값은 비어 있습니다. 예:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>关于css设置transform然后用js获取的代码_何问起</title>
    <meta charset="utf-8" />
    <style>
        #hovertreetf {border: 1px solid red;width: 120px;height: 120px;transform: translateX(100px);}
        #hovertreereusult{border:1px solid green;min-height:40px;margin:5px 0px;}
    </style>
</head>
<body>
    <div id="hovertreetf">这是一个div，使用css属性transform移动。js获取transform值为空。何问起</div>
    <div id="hovertreereusult"></div>
    <input type="button" value="获取transform属性值" id="hovertreeget" />
    <script>
        document.getElementById("hover"+"treeget").addEventListener("click", function () {

            var h_transformValue = document.getElementById("hovertreetf").style.transform;

            //如果获取到的是空字符串，则修改为文字：空
            if (h_transformValue == "")
                h_transformValue = "空";

            document.getElementById("hovertreereusult").innerText = "上面div的transform属性值为："+h_transformValue;
        })
    </script>
</body>
</html>
体验效果：http://hovertree.com/texiao/javascript/3/6.htm

如果先使用js设置了transform的值，则js可以获取到所设置的值。例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>关于js设置transform然后用js获取的代码_何问起</title>
    <meta charset="utf-8" />
    <style>
        #hovertreetf {border: 1px solid red;width: 120px;height: 120px;}
        #hovertreereusult{border:1px solid green;min-height:40px;margin:5px 0px;}
    </style>
</head>
<body>
    <div id="hovertreetf">这是一个div，使用js设置transform使它移动。js可获取所设置的transform值。何问起</div>
    <div id="hovertreereusult"></div>
    <input type="button" value="获取transform属性值" id="hovertreeget" />
    <script>
        document.getElementById("hovertreetf").style.transform = "translateX(50px)";

        document.getElementById("hover"+"treeget").addEventListener("click", function () {
            var h_transformValue = document.getElementById("hovertreetf").style.transform;

            //如果获取到的是空字符串，则修改为文字：空
            if (h_transformValue == "")
                h_transformValue = "空";

            document.getElementById("hovertreereusult").innerText = "上面div的transform属性值为："+h_transformValue;
        })
    </script>
</body>
</html>

로그인 후 복사