博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3和javascript中的transform
阅读量:5032 次
发布时间:2019-06-12

本文共 1208 字,大约阅读时间需要 4 分钟。

在javascript中,WebkitTransform 大概相当于 transform 。transform 为标准,WebkitTransform 适用于Webkit浏览器。js中的WebkitTransform在css对应于-webkit-transform属性。

在css中transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
先看一段没有移动div的代码:

这是一个div,没有移动。何问起

效果:

css中transform 属性可以把div移动。例如:

这是一个div,使用css属性transform移动。何问起

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

也可以使用js操作transform属性使div移动,效果跟上面使用css的一样。例如:

这是一个div,使用js操作transform移动。何问起

效果:

上面说到WebkitTransform 大概相当于 transform ,适用于Webkit浏览器。使用js操作WebkitTransform 也可以使div移动。例如:

这是一个div,使用js操作WebkitTransform移动。何问起

效果:

WebkitTransform在css对应于-webkit-transform属性,例如:

这是一个div,使用css属性 -webkit-transform 移动。何问起

效果:

如果只使用css设置transform,而js没有设置,那么js获取transform属性值为空,例如:

关于css设置transform然后用js获取的代码_何问起
这是一个div,使用css属性transform移动。js获取transform值为空。何问起

体验效果:

如果先使用js设置了transform的值,则js可以获取到所设置的值。例如:

关于js设置transform然后用js获取的代码_何问起
这是一个div,使用js设置transform使它移动。js可获取所设置的transform值。何问起

效果体验:

更多网页特效:

转载于:https://www.cnblogs.com/jihua/p/jstransform.html

你可能感兴趣的文章
Python中Gradient Boosting Machine(GBM)调参方法详解
查看>>
利用DDE通信将PLC数据传输到EXCEL
查看>>
Eclipse 实用快捷键大全
查看>>
与非门和或门实现异或门
查看>>
golang统计出其中英文字母、空格、数字和其它字符的个数
查看>>
poj 1782 Run Length Encoding
查看>>
《自我介绍》
查看>>
在线考试系统设计思路
查看>>
p1150[noip2013普及]表达式求值
查看>>
POST和GET有什么区别?
查看>>
js基础
查看>>
基础_模型迁移_CBIR_augmentation
查看>>
第二次寒假作业
查看>>
类与 对象 概念 break continue
查看>>
tensorRT使用python进行网络定义
查看>>
[转]从程序员到项目经理(三):认识项目经理
查看>>
深度分析如何在Hadoop中控制Map的数量
查看>>
dede判断当前文章
查看>>
mpvue学习笔记
查看>>
[LeetCode] 628. Maximum Product of Three Numbers_Easy
查看>>