transform transition transilate translation的区别和联系

最新推荐文章于 2023-08-30 11:18:54 发布

jasonhsu9

最新推荐文章于 2023-08-30 11:18:54 发布

阅读量2k

点赞数

文章标签： html5中的translate属性

本文链接：https://blog.csdn.net/weixin_42474202/article/details/83686281

版权

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”**将不会翻译此元素的内容。
兼容性: 目前所有浏览器都不兼容

jasonhsu9

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
transform transition transilate translation的区别和联系

transform、transition、 translate、 translation四个英语单词长得太像，我这个英语渣必须好好区分一下。translation: 中文为翻译translation: 即不是css属性，也不是属性值transform: css 属性名transition : css 属性名translate: css属性值transition 设置元素 –...
复制链接

扫一扫