css3中怎么实现图片平移-成都创新互联网站建设

成都创新互联网站制作

028-86922220

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

css3中怎么实现图片平移

css3中怎么实现图片平移，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、成都全网营销推广、网站程序开发、HTML5响应式成都网站建设公司、手机网站开发、微商城、网站托管及成都网站维护公司、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为成都地磅秤行业客户提供了网站设计服务。

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

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

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

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

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

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

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

代码示例：

HTML代码：



  
    
  
  

translate(45px)  

             

translateX(45px)

             

translateY(45px)

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);
}

效果图：

css3中怎么实现图片平移

看完上述内容，你们掌握css3中怎么实现图片平移的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


分享名称：css3中怎么实现图片平移
链接URL：http://kswsj.cn/article/ppgcgh.html

其他资讯