css3的translate3d用法是什么
程序员文章站
2024-01-11 13:45:16
...
在css3中,translate3d()与transform属性配合使用可定义元素的3D转换,语法为“tranform: translate3d(x,y,z)”;其中的参数分别表示了元素在x、y和z轴方向移动的距离。
本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。
css3的translate3d用法是什么
translate3d(x,y,z) 作为transform属性的值,用于定义 3D 转换。
transform 属性向元素应用 2D 或 3D 转换
语法为:
tranform: translate3d(x,y,z)
这三个参数代表的含义:
transform: translateX(100px) :仅在x轴上移动
transform: translateY(100px) : 仅在y轴上移动
transform: translateZ(100px) : 仅在z轴上移动
transform: translate3d(x,y,z) : xyz分别代表要移动的轴的方向的距离
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .div:hover { transform:translate3d(8px,8px,0); } .div { width:100px; height:80px; background-color: pink; } </style> <head> <body> <div class="div"></div> </body> </html>
输出结果:
(学习视频分享:css视频教程)
以上就是css3的translate3d用法是什么的详细内容,更多请关注其它相关文章!
下一篇: 求教导如何优化算法