css – transform3d():使用百分比在父对象内移动

当以百分比移动对象时,CSS具有标准行为,该百分比表示其父容器(div)的维度.

使用CSS3转换时不是这样:translate3d().如果对X,Y或Z坐标使用百分比值,则百分比表示当前对象的尺寸,而不是其父对象的尺寸.

问题现在应该是显而易见的:如果我需要使用CSS3动画并转换:translate3d()将当前对象移动到其动态可调整大小的父级的维度内,我根本就不知道该怎么做.例如:使用translate3d(100%,0)将使对象移动当前对象的物理宽度,而不是其包含的块.

有任何想法如何动态改变父母的维度,好吗?或者如何使用硬件加速的translate3d()使当前对象在其父级内进行翻译?

Mozilla Developer Network确认:百分比(转换中)是指边界框的大小.

请问有解决方法吗?

解决方法

我不认为有一个只有CSS的解决方案.
我的方法是使用 JavaScript计算包装元素的宽度与子宽度之间的关系,然后将其与目标X值相乘:
var transform = "translate3d(" + translateX * (wrapperCompWidth / innerCompWidth) + "%,0)";

这是我的意思的一个有效例子:http://jsfiddle.net/Whre/7qhnA/2/

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效
js如何实现文字闪烁特效?(图文+视频)
CSS3怎么实现背景颜色渐变?(图文+视频)
Css3如何实现文本溢出隐藏并显示省略号效果
添加CSS的三种方式
css如何实现单边阴影效果
css font-size-adjust属性怎么用
三分钟了解css中z-index属性
css text-align-last属性怎么用
css设置背景图片模糊,内容不模糊
弹性盒子布局flex是什么
圆角边框的css属性是什么
前端特效之520表白神器-旋转照片墙
css font-style属性怎么用
css position属性怎么用