在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. DockerCon 2016 – 微软带来了什么？

    根据Forrester的调查,接近半数的企业CIO在考虑IT架构的时候更乐于接受开源方案,这主要是基于低成本,避免供应商锁定和敏捷的需求:同时另外一家North Bridge的调研机构的调查显示,20 ...

  2. VMware下对虚拟机Ubuntu14系统所在分区sda1进行磁盘扩容

    VMware下对虚拟机Ubuntu14系统所在分区sda1进行磁盘扩容 一般来说,在对虚拟机里的Ubuntu下的磁盘进行扩容时,都是添加新的分区,而并不是对其系统所在分区进行扩容,如在此链接中http ...

  3. PHP5.4~7.1新特性总结

    http://note.youdao.com/noteshare?id=7273b858fc12873ad092979e4ba173a7&sub=WEB334fdcf50b507ad93549 ...

  4. Xamarin.Android之SQLiteOpenHelper

    一.前言 在手机中进行网络连接不仅是耗时也是耗电的,而耗电却是致命的.所以我们就需要数据库帮助我们存储离线数据,以便在用户未使用网络的情况下也可以能够使用应用的部分功能,而在需要网络连接的功能上采用提 ...

  5. MySQL8：连接查询

    连接查询 连接是关系型数据库模型的主要特点. 连接查询是关系型数据库中最主要的查询,主要包括内连接.外连接等通过联结运算符可以实现多个表查询. 在关系型数据库管理系统中,表建立时各种数据之间的关系不必 ...

  6. 转职成为TypeScript程序员的参考手册

    写在前面 作者并没有任何可以作为背书的履历来证明自己写作这份手册的分量. 其内容大都来自于TypeScript官方资料或者搜索引擎获得,期间掺杂少量作者的私见,并会标明. 大部分内容来自于http:/ ...

  7. CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking)

    CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking) 我在(Modern OpenGL用Shader拾取 ...

  8. [翻译]AKKA笔记 - 有限状态机 -1

    原文地址:http://rerun.me/2016/05/21/akka-notes-finite-state-machines-1/ 我最近有个机会在工作上使用了Akka FSM,是个非常有趣的例子 ...

  9. salesforce 零基础学习（五十六）实现getById

    本来想通过template封装DAO中的getById,结果template中无法选择$(object_name),所以此种想法打消了,直接封装成一个Helper类,方便以后项目中如果有类似需要可以使 ...

  10. Android 捕获异常并在应用崩溃后重启应用

    问题概述: 在Android应用开发中,偶尔会因为测试的不充分导致一些异常没有被捕获,这时应用会出现异常并强制关闭,这样会导致很不好的用户体验,为了解决这个问题,我们需要捕获相关的异常并做处理. 首先 ...