CSS3和javascript中的transform-PHP开发-PHP中文網

首頁

php教程

PHP开发

CSS3和javascript中的transform

高洛峰

Nov 30, 2016 pm 04:23 PM

css3

在javascript中，WebkitTransform 大概相當於 transform 。 transform 為標準，WebkitTransform 適用於Webkit瀏覽器。 js中的WebkitTransform在css對應-webkit-transform屬性。

在css中transform 屬性向元素套用 2D 或 3D 轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

先看一段沒有移動div的程式碼：

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

css中transform 屬性可以把div移動。例如：

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

其中 transform:translateX(100px) 表示id為hovertreetf的div元素水平向右移動100像素。

也可以使用js操作transform屬性讓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 大概相當於 transform ，適用於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設定transform，而js沒有設置，那麼js取得transform屬性值為空，例如：

<!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>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

禪工作室 13.0.1

強大的PHP整合開發環境

mPDF

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），