当前位置: 首页> 教育> 培训 > 前端3d动画-----平移 transform: translate3d()

前端3d动画-----平移 transform: translate3d()

时间:2025/7/11 15:29:07来源:https://blog.csdn.net/weixin_58694594/article/details/141403568 浏览次数:0次

 必须加这个属性:transform-style: preserve-3d;

 

 perspective: 900px;  设置了景深才能感到近大远小的感觉 

         

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 500px;height: 500px;border: 5px solid black;transform-style: preserve-3d;/* 必加transform-style: preserve-3d; 默认是flat:2d;*/position: relative;margin: 0 auto;/* transform: rotateY(30deg);*/perspective: 900px;/* 设置景深 */}.center{position:absolute;width: 200px;height: 200px;background: red;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;transition: all 3s;}.box:hover .center{/* transform: translateZ(800px); */transform: translate3d(0,0,200px);/* 正值朝前,负值朝后 */}</style>
</head>
<body><div class="box"><div class="center"></div></div>
</body>
</html>

  transform: translateZ(80px);  等于transform: translate3d(0,0,80px);,里面的参数对应x,y,z轴

           

 

 

 

关键字:前端3d动画-----平移 transform: translate3d()

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: