大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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中怎么实现图片平移
本文地址:http://dzwzjz.com/article/ppgcgh.html