3D旋转+位移+透视

3D旋转

transform: rotate3D(x,y,z,deg);
x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度

 .box {transform: rotate3D(1,1,1,180deg);}

• rorateX，X轴旋转
• rorateY，Y轴旋转
• rorateZ， Z轴旋转

 .box:hover {transform: rotateX(180deg);transform: rotateY(180deg);transform: rotateZ(180deg);}

旋转的方向：左手法则

**左手法则:**左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。

3D位移

transform: translate3d(x,y,z);

    .box:hover{transform: translate3d(100px,100px,0px);}

• transform: translateX(); //沿着x轴移动
• transform: translateY();//沿着Y轴移动
• transform: translateZ();//沿着Z轴移动

     .box {transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px);}

透视

透视：

• 设置给变换盒子的父容器。
• 设置用户眼睛与屏幕的距离。
• 透视效果只是视觉上的呈现，不是真正的距离。

        body {perspective: 200px;}

perspective 透视：

• translateZ为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大。
• translateZ为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。
• translateZ为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！