在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. 烂泥：wiki系统confluence5.6.6安装、中文、破解及迁移

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb confluence是一个专业的企业知识管理与协同软件,可以用于构建企业wiki.通过它 ...

  2. Firefox开发者专版浏览器，Web开发者利器.

    2015的11月9日,Firefox迎来了自己的十周岁生日.在庆祝Firefox十周年之际,Mozilla发布了Firefox开发者专版,这是首款专门为开发者打造的浏览器. 浏览器中独特的暗色调设计. ...

  3. ENode简介与各种教学视频资源汇总（要进群这篇文章必看）

    ENode是什么 ENode是一个.NET平台开源的应用开发框架,为开发人员提供了一套完整的基于DDD+CQRS+ES+(in-memory)+EDA架构风格的解决方案. ENode的特色是什么 解决 ...

  4. .NET里简易实现IoC

    .NET里简易实现IoC 前言 在前面的篇幅中对依赖倒置原则和IoC框架的使用只是做了个简单的介绍,并没有很详细的去演示,可能有的朋友还是区分不了依赖倒置.依赖注入.控制反转这几个名词,或许知道的也只 ...

  5. React-Native 组件开发方法

    前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持. ...

  6. 细说websocket - php篇

    下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分,这个部分在 node 中可以十分轻松的完成,因为 node 提供的 net 模块已经对 socket ...

  7. iOS-----正则表达式的基础语法

    正则表达式简单语法总结 一.什么是正则表达式 从概念上来说,正则表达式也是一门小巧而精炼的语言,它可以用来简化检索特定的字符串,替换特定字符等功能,有许多开发语言工具,都内嵌支持正则表达式.那么一个正 ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（11）-系统日志和异常的处理①

    系列目录 系统需要越来越自动化,我们需要引入日志记录和异常捕获管理员的操作记录需要被记录,看出哪些模块是频繁操作,分析哪些是不必要的功能,哪些是需要被优化的.系统的异常需要被捕获,而不是将系统出错显示 ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（15）-权限管理系统准备

    系列目录 这节我们说下权限系统的特点,本系统采用的是MVC4+EF5+IOC 接口编程的架构,其中的权限树用的是DWTree,功能上做到灵活,授权操控细致,权限可以细到按钮级别 ,为了部署简单,导致设 ...

  10. vscode常用设置

    1.代码提示快捷键设置:(keybindings.json) { "key": "ctrl+j","command": "edit ...