js里transform怎么填写translate3d值

JavaScript09

js里transform怎么填写translate3d值,第1张

原生JS来操作比较麻烦，每个浏览器操作方法都不一样，如果是写在style属性里的CSS，可以这么操作： obj.style.transform 如果是写在css里就要判断浏览器了，比较麻烦，推荐你用jQ吧，一句搞定： obj.css("transform")

推荐基于webGL的3D框架类库！three.js的知名度很高，在开源中国、思否、掘金等技术社区会有很多应用指导案例，很多人问我是不是需要学webGL，three.js正是对webgl进行了封装，提供更高层的渲染接口，不用重新学习3D绘图底层逻辑。

题主没有提供太多背景信息，是否具备中高级前端开发基础？three.js相对于初学者门槛很高，需要花费更多的时间，一个加载模型、调光、选择模型弹框的功能，就能写出Threejs上百行代码。

有一个针对前端转3D开发初学者的解决方案，推荐thingjs在线平台，开发体验比较如下：

提醒一下，three.js并没有特定的行业应用，属于技术研究范畴；thingjs专注于物联网3D可视化领域，对于智慧城市、智慧工厂、安全消防、城市交通可视化应用开发者非常友好！做前端技术应用，推荐物联网3D商业项目方向，15万个开发者的一致选择！

获取代码如下：

<div id="test" style="tranform:translate3D(20px,50px,0)"></div> var style = document.getElementById('test').style

var transform = style.transform || ''

var transformY = transform.match(/translate3d\(\d+px,\s*(\d+)px,\s*(\d+)px\)/i)[1]

解释：

style是id为test的div的style属性

transform是style规则中的transform属性，此处忽略前缀问题，如果需要取-webkit-transform则可以通过WebkitTransform获取

transform.match(/translate3d\(\d+px,\s*(\d+)px,\s*(\d+)px\)/i)[1]获取translate3d第二个参数的数值，此题中为50