transform transition transilate translation的区别和联系

科技前沿 • 2025-03-28 19:57 • 阅读 53

大家好，我是讯享网，很高兴认识大家。

transform、transition、 translate、 translation四个英语单词长得太像，我这个英语渣必须好好区分一下。

translation: 中文为翻译
translation: 即不是css属性，也不是属性值

transform: css 属性名
transition : css 属性名
translate: css属性值

transition 设置元素 – 过渡效果

重点强调在时间（transition的值，以s为单位）上的过渡视效过程

讯享网

讯享网<!DOCTYPE html> <html> <head> <style> div { 
     width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { 
     top: 100px; } </style> </head> <body> <div></div> <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> </body> </html>

transform 设置元素 – 2D/3D转换

浏览器会直接显示转换后的效果，不像transition这个属性那样有动画效果

讯享网

<!DOCTYPE html> <html> <head> <style> div { 
     margin:30px; width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o-transform:rotate(9deg); /* Opera */ } </style> </head> <body> <div>Hello World</div> </body> </html>

translate()方法 – 完成位移

translate()方法详细用法参考 位移translate()方法

在CSS3中，我们可以使用translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。它是一个属性值，和属性transform配合完成2d/3d转换。

translate 作为 html 5的属性

注意和translate 作为transform的translate完全不是一个东西

定义：translate 是指标签属性，不是css3样式规则transform的translate，说它的定义吧：规定是否应该翻译元素内容。只需了解：translate是HTML5中的新属性
语法: <tag translate="no | yes">内容</tag>
实例：<div translate="no">我是汉字我骄傲</div> ,主要用于一些翻译插件等，当它们识别到translate=“no”将不会翻译此元素的内容。
兼容性: 目前所有浏览器都不兼容

transform transition transilate translation的区别和联系

transition 设置元素 – 过渡效果

transform 设置元素 – 2D/3D转换

translate()方法 – 完成位移

translate 作为 html 5的属性

相关推荐