css3如何实现图片平移

css3中，可利用transform属性实现图片平移，当值设置为“translate(x,y)”可实现图片在x轴和y轴方向同时平移，值为“translate X(x)”可在x轴方向平移，值为“translateY(y)”可在y轴方向平移。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

平移的定义：元素在原来的位置上直线移动。

Transform属性有三个设置平移的属性值：

• translate（x，y）在x轴和y轴方向同时移动

• translate X（x）仅在x轴方向移动

• translateY（y）仅在y轴方向移动

代码示例：

HTML代码：

!-- translate-->
    div class="card">
      div class="box translate">
        div class="fill">
    /div>
      /div>
      p>
    translate(45px)  /p>
    /div>
    div class="card">
      div class="box translatex">
        div class="fill">
    /div>
      /div>
      p>
    translateX(45px)/p>
    /div>
    div class="card">
      div class="box translateY">
        div class="fill">
    /div>
      /div>
      p>
    translateY(45px)/p>
    /div>
    

css代码：

*, *:after, *:before {
      box-sizing: border-box;
}
body {
      background: #F5F3F4;
      margin: 0;
      padding: 10px;
      font-family: 'OPEn Sans', sans-serif;
      text-align: center;
}
.card {
      display: inline-block;
      margin: 10px;
      background: #fff;
      padding: 15px;
      min-width: 200px;
      box-shadow: 0 3px 5px #ddd;
      color: #555;
}
.card .box {
      width: 100px;
      height: 100px;
      margin: auto;
      background: #ddd;
      cursor: pointer;
      box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
      width: 100px;
      height: 100px;
      posITion: relative;
      background: pink;
      opacity: .5;
      box-shadow: 0 0 5px #ccc;
      -webkit-transition: 0.3s;
      transition: 0.3s;
}
.card p {
      margin: 25px 0 0;
}
.translate:hover .fill {
      -webkit-transform: translate(45px, 1em);
      transform: translate(45px, 1em);
}
.translateX:hover .fill {
      -webkit-transform: translateX(45px);
      transform: translateX(45px);
}
.translateY:hover .fill {
      -webkit-transform: translateY(45px);
      transform: translateY(45px);
}
    

效果图：

（学习视频分享：css视频教程）

以上就是css3如何实现图片平移的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！