本教程操作环境:windows10系统、css3&&html5版本、dell g3电脑。
translate是css3属性transform属性向元素应用 2d 或 3d 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
translate(x,y) 定义 2d 转换。
语法如下:
transform:translate(<translation-value>[, <translation-value>]);
translate()函数能够移动元素。
取值:
translate(<translation-value>[, <translation-value>]);表示使元素在x轴和y轴同时移动,<translation-value>表示位移量。包含两个参数,如果省略了第二个参数则第二个参数为0;如果参数为负,则表示往相反的方向移动。
translatex(<translation-value>);表示只在x轴(水平方向)移动元素。
translatey(<translation-value>);表示只在y轴(垂直方向)移动元素。
translatez(<translation-value>);表示只在z轴移动元素,前提是元素本身或者元素的父元素设定了透视值。
示例如下:
<!doctype html><html><head><style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; -ms-transform: translate(50px,100px); /* ie 9 */ transform: translate(50px,100px); /* 标准语法 */}</style></head><body><h1>translate() 方法</h1><p>translate() 方法从元素当前位置对其进行移动:</p><div>该 div 元素从其当前位置向右移动 50 个像素,并向下移动 100 个像素。</div></body></html>
输出结果:
(学习视频分享:css视频教程、html视频教程)
以上就是translate是css3属性吗的详细内容。
