在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. 编译器开发系列--Ocelot语言4.类型定义的检查

    这里主要介绍一下检查循环定义的结构体.联合体.是对成员中包含自己本身的结构体.联合体进行检查.所谓"成员中包含自己本身",举例来说,就是指下面这样的定义. struct point ...

  2. SEED实验系列文章目录

    美国雪城大学SEEDLabs实验列表 SEEDLabs是一套完整的信息安全实验,涵盖本科信息安全教学中的大部分基本原理.项目组2002年由杜文亮教授创建,目前开发了30个实验,几百所大学已采用.实验楼 ...

  3. vim+vundle配置

    Linux环境下写代码虽然没有IDE,但通过给vim配置几个插件也足够好用.一般常用的插件主要包括几类,查找文件,查找符号的定义或者声明(函数,变量等)以及自动补全功能.一般流程都是下载需要的工具,然 ...

  4. Spring Security OAuth2 开发指南

    官方原文:http://projects.spring.io/spring-security-oauth/docs/oauth2.html 翻译及修改补充:Alex Liao. 转载请注明来源:htt ...

  5. 前端构建大法 Gulp 系列 (一)：为什么需要前端构建

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  6. linux用户权限相关内容查看

    linux用户权限相关内容查看 1   用户信息 创建用户一个名为 webuser 的账号,并填写相应的信息: root@iZ94fabhqhuZ:~# adduser webuser Adding ...

  7. Windows10自适应和交互式toast通知[1]

    阅读目录: 概述 toast通知的结构 视觉区域(Visual) 行为(Actions) 特定场景下的Toast通知 带多内容的通知 带行为的通知(例子1) 带行为的通知(例子2) 带文本输入框和行为 ...

  8. Markdown是怎样接管我的各种的写作工作的

    对于一个程序猿来说,没有什么比单纯的写代码更能让人兴奋了.如果能让你像写代码一样写文档,不用再面对那些繁琐的样式,你会怎么看?它就是Markdown!即使博客园已经有不少介绍的文章了,但是我依然还是不 ...

  9. Windows 2008 - 由于管理员设置的策略,该磁盘处于脱机状态

    http://blog.sina.com.cn/s/blog_59cc90640102x8m4.html 查看原文:https://www.bxl.me/9279.html准备使用云主机挂机的时候呢出 ...

  10. ABP框架 - 工作单元

    文档目录 本节内容: 简介 在ABP中管理连接和事务 约定的工作单元 UnitOfWork 特性 IUnitOfWorkManager 工作单元详情 禁用工作单元 非事务性工作单元 工作单元方法调用另 ...