css3之transform详解translate 作者：七棵菜 日期：2022-11-30 栏目：计算机分类：1 人气：274 ### translate 元素平移，参考坐标系为元素的位置。 #### translateX 向X轴平移，填正数往右平移，填负数，往左平移 #### translateY 向Y轴平移，填正数往下平移，填负数，往上平移 #### translateZ 向Z轴平移 这个可能有点难理解，想像一个场景，你现在和电脑屏幕的距离，这就是Z轴的距离，电脑屏幕离你越近，那么translateZ() 里面的值越大；电脑屏幕离你越远，translateZ() 的值就越小。 所以说，`Z`增加，那么这个电脑屏幕，离你就越近。 因为`Z`轴是朝向我们的，所以看不出效果，因此我们把它转个身，使用`rorate`让`Z`轴面对右边，这样就直观了，如下图：  #### translate3d `translate`是同时设置`translateX`和`translateY`，所以里面可以填两个参数，第一个值`X`，第二个`Y`。 `translate3d`是同时设置`translateX`，`translateY`和`translateZ`，所以里面可以填三个参数。 不同的是， 如果`translate`第二个参数不填的话，默认是0，但是`translate3d`三个参数，必须都填。 ### 鸣谢 - [博客园**杨耿**](https://www.cnblogs.com/yanggeng/p/11286250.html) 标签： css3 transform 上一篇：如何使用mvn命令导入依赖 下一篇：css3之transform详解rotate 随便看看 2024-02-19 PHP7 运算符“??” 和“?:”的区别 2022-11-30 Linux 后台运行命令 2022-11-25 关于我们 2022-11-30 centos一键系统安装lnmp集成环境 2022-11-30 linux 生成 ssh 公钥 留言
