css3中translate和transition怎么用-创新互联
这篇文章给大家分享的是有关css3中translate和transition怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都一家集口碑和实力的网站建设服务商，拥有专业的企业建站团队和靠谱的建站技术，十多年企业及个人网站建设经验 ,为成都上千客户提供网页设计制作,网站开发,企业网站制作建设等服务,包括成都营销型网站建设，
品牌网站建设，同时也为不同行业的客户提供成都做网站、成都网站制作的服务,包括成都电商型网站制作建设,装修行业网站制作建设，传统机械行业网站建设,传统农业行业网站制作建设。在成都做网站,选网站制作建设服务商就选创新互联。
示例：
translate和transition
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#translate {
transition: all 2s;
-ms-transition: all 2s;
-webkit-transition: all 2s;
}
div#translate:hover{
transform: translate(50px, 100px);
-ms-transform: translate(50px, 100px);
-webkit-transform: translate(50px, 100px);
}
Hello, This is a Div element
Hello, This is another Div element
演示demo请点(这里)[/css3/translate.html]
translate(a, b)：用官方的话说叫做2D转移，其实就是平面上的x轴和y轴移动，搞那么多名词就是因为我们学识太低，不想让我们容易了解
a - 在横向（左右方向）也就是x轴移动a单位距离，比如是10px，那么就移动10px，正值向右移动，负值向左移动 b - 在纵向（上下方向）也就是y轴移动b单位距离，比如是50px，那么就移动10px，正值向下移动，负值向上移动
起点在左上角哈，但是如果元素位置开始就设置了非原点的话就另说了，就是在元素基础上做计算
原点(0,0)-------
|
|
|
transition 动画过渡
transition： property duration timing-function delay
property - css属性
duration - 动画执行时长 如果为0 动画不执行
timing-function 动画执行方式 默认ease
delay - 动画延迟执行时间 默认0
感谢各位的阅读！关于“css3中translate和transition怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
本文标题：css3中translate和transition怎么用-创新互联
网站路径：
http://cdkjz.cn/article/dpogdd.html
