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

效果：http://hovertree.com/texiao/javascript/3/1.htm

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像素。 效果：http://hovertree.com/texiao/javascript/3/2.htm

也可以使用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>

效果：http://hovertree.com/texiao/javascript/3/3.htm

上面说到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>

效果：http://hovertree.com/texiao/javascript/3/4.htm

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>

效果：http://hovertree.com/texiao/javascript/3/5.htm

如果只使用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>

效果体验：http://hovertree.com/texiao/javascript/3/7.htm

更多网页特效：http://www.cnblogs.com/jihua/p/webfront.html

CSS3和javascript中的transform的更多相关文章

  1. CSS3中的transform变形

    在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...

  2. css3中trastion,transform,animation基本的了解

    毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也.虽然 ...

  3. 原生JavaScript中动画与特效的实现原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  4. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  5. JavaScript中‘this’关键词的优雅解释

    本文转载自:众成翻译 译者:MinweiShen 链接:http://www.zcfy.cc/article/901 原文:https://rainsoft.io/gentle-explanation ...

  6. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  7. JavaScript中的Get和Set访问器

    今天要和大家分享的是JavaScript中的Get和Set访问器,和C#中的访问器非常相似. 标准的Get和Set访问器的实现   function Field(val){       this.va ...

  8. CSS3动画属性：变形(transform)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 语法 t ...

  9. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

随机推荐

  1. 一个简单的网站web项目的详解

    有不对的术语,或者不好理解的部分,欢迎大家批评指正,谢谢大家! 近期做的网站web项目,实现登录功能,查询功能.首先把这个项目分为几个模块来处理,当前用户模块,历史用户模块,历史记录模块,数据库模块, ...

  2. jenkins无法重启tomcat的原因

    在使用Hudson的执行sh脚本的时候,如果sh脚本是一个后台进程,如 Tomcat 这样的服务.如果使用Hudson的默认配置,会发现这些sh 进程有启动的过程,但是不会常驻后台,看Hudson 输 ...

  3. Firebug中调试中的js脚本中中文内容显示为乱码

    Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...

  4. x01.os.22: ubuntu 常用设置

    新组装了个 64 位电脑,i5 CPU,进入 ubuntu 后,又是一通搜索设置,整理如下,以备后用. 安装 .dep 包 sudo dpkg -i [filename.dep] 在 ubuntu 中 ...

  5. 技术笔记：Indy控件发送邮件

    工作中有个需求需要发送邮件,因为使用的delphi6,所以自然就选择了indy组件,想想这事挺简单的.实现的过程倒是简单,看着Indy的demo很快就完了,毕竟也不是很复杂的功能. 功能要求: 1.压 ...

  6. 【AutoMapper官方文档】DTO与Domin Model相互转换（中）

    写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...

  7. 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一

    如果一个页面中有很长的列表/内容,很多应用都会在用户向下滚动时隐藏页面的头,给用户留出更多的阅读空间,同时提供一个方便的吸顶工具栏,比如淘宝中的店铺页面. 下面是一个比较简单的实现,如果有同学有更好的 ...

  8. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  9. Git入门资料汇总

    Git是一个非常好用的版本控制工具,同时,它也是一个相对比较复杂的工具,想要掌握它还是需要花一番功夫的.网络上关于Git的入门资料已经很多了,我就不再重复了,直接把我学习的文章放在这里. Git详解 ...

  10. C++11 shared_ptr 智能指针 的使用,避免内存泄露

    多线程程序经常会遇到在某个线程A创建了一个对象,这个对象需要在线程B使用, 在没有shared_ptr时,因为线程A,B结束时间不确定,即在A或B线程先释放这个对象都有可能造成另一个线程崩溃, 所以为 ...