您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

css3中translate的用法
发表:紫石头原创模板堂    发表时间:2019-05-29 09:46:04    阅读:158
    css3中translate用法是怎么样的?这些可能一些新手学习css所遇到的问题,接下来我们就来讲解一下css中位移translate()如何使用?
    一:translate()用法
    在css样式中,很多人都喜欢使用translate()来表示位移,可以使用translate()中的x和y来表示元素在水平方向或者垂直方向上移动。
    例如:
    1.translateY(y):表示该元素在垂直方向上移动,也就是我们所说的y轴
    2.translateX(x):表示该元素在水平方向上移动,也就是我们所说的x轴
    二:translate()语法
    transform:translateX(x);或者transform:translateY(y);
    在css3中,transform属性的变形方法都是属于transform,并且要加上transform,从而表示变形处理,元素在水平方向中移动的距离的单位用px和百分比表示,当x出现正值的时候,表示元素在水平方向右有移动,当x为负值的时候,表示该元素向左移动,
    例如:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSS3位移translate()方法</title>
    <style type="text/css">
    /*设置原始元素样式*/
    #origin
    {
    margin:100px auto;/*水平居中*/
    width:200px;
    height:100px;
    border:1px dashed silver;
    }
    /*设置当前元素样式*/
    #current
    {
    width:200px;
    height:100px;
    color:white;
    background-color: #3EDFF4;
    text-align:center;
    transform:translateX(50px);
    -webkit-transform:translateX(20px);  /*兼容-webkit-引擎浏览器*/
    -moz-transform:translateX(20px);     /*兼容-moz-引擎浏览器*/
    }
    </style>
    </head>
    <body>
    <div id="origin">
    <div id="current"></div>
    </div>
    </body>
    </html>
    总结:transform:translateX(50px)说明在水平方向上移动50px,这时候我们如果我们把50px改成-50px,该元素就在水平方向相反的方向移动50px。
    translate(y)的用法:
    translate(y)的用法和translate(x)的用法很相似,x是在水平方向上移动,y是在垂直方向上移动,当
    y出现正值的时候,说明该元素在向下移动,如果出现负值,说明是向上移动,和我们的正常思维相反。
    translate(x,y)的混合使用:
    表示元素在x中水平方向上移动,这里需要注意的是,y值是一个参数,没有设置y的值话,可能表示元素在x轴移动,其实单纯的使用translate()是没有太多的意义,我们可以结合css使用。
模板推荐
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照