CSS中的transform:translate3d(50％，0,0)和left:50％之间的区别? [英] Difference between transform:translate3d(50%,0,0) and left:50% in css?

问题描述

在CSS中，transform:translate3d(50％，0,0)与左:50％有何不同?这是我制作的

解决方案

translate3d(50％，0,0)考虑到元素本身的百分比，因此它是从左侧进行翻译的元素大小的一半.

位于小提琴中绝对位置的div的左侧是相对于相对放置的容器div的，因此 left:50％; 是该容器的50％.

How does the transform:translate3d(50%,0,0) differ from left:50% in css? heres the jsfiddle that i made.

transform: translate3d(50%,0,0)

and

left:50%;

解决方案

translate3d(50%,0,0) considers the percentage as of the element itself, so it is being translated from the left half of the element size.

The left of the div that is positioned absolute in the fiddle is relative to the container div which is positioned relative, so the left:50%;is 50% of this container.

这篇关于CSS中的transform:translate3d(50％，0,0)和left:50％之间的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！