translate : 平移的意思,如:translateX(10px),就是向X轴方向平移10个px。
rotate : 旋转的意思,如:rotateY(90deg),就是按Y轴顺时针旋转90度。
当我在同时使用它们两个的时候发现并不是特别顺心,这里面主要是涉及到了中心点的原因。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>提交</title> <style> *{ padding:0; margin:0; } .div{ width: 200px; height: 200px; transform-style: preserve-3d; transform: rotateY(8deg); margin-left:300px; position: relative; border:1px solid black; } .div::before{ content: ""; width: 1px; height:200px; background:black; display: block; margin-left: 100px; } .div::after{ content: ""; width: 200px; height: 1px; background: black; display: block; margin-top: -100px; } .div1{ position: absolute; width: 50px; height: 200px; background:pink; left:0; top:0; transform: rotateY(0deg) translateX(0px); } </style> </head> <body> <div class="div"> <div class="div1">haha</div> </div> </body> </html>
原始代码很简单,一个父div,里面一个子div1
预览效果:
父div就是田字格方框,子div就是粉色部分。
下面我们给子div设置上和rotateY(40deg),这个时候子div是按照自己宽度的中心轴旋转的。
下面我们设置上translateX(50px),这时候我们再调整rotateY的值,发现是按照没有平移前的那个位置的中心轴旋转的。
这说明,当同时使用translate和rotate属性的时候,rotate始终按div第一次出现的位置的纵向中心轴旋转。
但是这样不太好理解,也不好计算,于是乎这样做了,当我需要平移div的时候,直接使用margin-left,这样就始终按div的中心轴旋转了。
这样就不用担心位置弄错了。