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视频教程）

【文章原创作者：大丰网站设计公司 http://www.1234xp.com/dafeng.html 处的文章,转载请说明出处】