返回顶部
首页 > 资讯 > 前端开发 > VUE >css3中怎么实现图片平移
  • 549
分享到

css3中怎么实现图片平移

2024-04-02 19:04:59 549人浏览 独家记忆
摘要

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

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

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

效果图:

css3中怎么实现图片平移

看完上述内容,你们掌握css3中怎么实现图片平移的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网VUE频道,感谢各位的阅读!

--结束END--

本文标题: css3中怎么实现图片平移

本文链接: https://www.lsjlt.com/news/73245.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • css3中怎么实现图片平移
    css3中怎么实现图片平移,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 css3中,可利用transform属性...
    99+
    2024-04-02
  • CSS3中怎么实现平移动画效果
    这期内容当中小编将会给大家带来有关CSS3中怎么实现平移动画效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。一、平移动画有关的CSS3属性以及相关的属性描述  1、tr...
    99+
    2024-04-02
  • mfc中怎么实现图形平移
    在MFC中,可以通过以下步骤实现图形的平移:1. 创建一个MFC应用程序,并打开需要进行图形平移的视图类。2. 在视图类的头文件中添...
    99+
    2023-09-16
    mfc
  • css中怎么实现移动端图片文字水平居中
    css中怎么实现移动端图片文字水平居中,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。solution 1:利用行内元素的padding-lef...
    99+
    2024-04-02
  • Python中OpenCV图像平移怎么实现
    小编给大家分享一下Python中OpenCV图像平移怎么实现,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!每次学习新东西的时候,橡皮擦都是去海量检索,然后找到适合...
    99+
    2023-06-15
  • CSS3图片边框怎么实现
    这篇文章主要介绍CSS3图片边框怎么实现,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!使用CSS3 border-image 属性,你可以在元素的周围设置图片边框。一、浏览器支持表中的数字指定完全支持该属性的第一个浏...
    99+
    2023-06-08
  • css3中怎么实现图片翻牌特效
    这篇文章给大家介绍css3中怎么实现图片翻牌特效,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。代码如下:<!doctype html><html><hea...
    99+
    2024-04-02
  • CSS3怎么实现悬停图片库
    今天小编给大家分享一下CSS3怎么实现悬停图片库的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2024-04-02
  • CSS中怎么实现背景图片平铺
    这篇文章将为大家详细讲解有关CSS中怎么实现背景图片平铺,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。CSS背景图片平铺技巧使用CSS来设置背景图片同传统的...
    99+
    2024-04-02
  • css3如何实现元素的平移
    这篇文章主要讲解了“css3如何实现元素的平移”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3如何实现元素的平移”吧! 在...
    99+
    2024-04-02
  • css3如何实现平移效果transfrom:translate
    本篇内容主要讲解“css3如何实现平移效果transfrom:translate”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3如何实现平移效果transfrom:translate”吧!...
    99+
    2023-06-08
  • opencv实现图像平移
    本文实例为大家分享了opencv实现图像平移的具体代码,供大家参考,具体内容如下 图像平移指的是沿水平方向或垂直方向进行图像的移动。 平移变换公式: 对于原始图像而言,正变换矩阵:...
    99+
    2022-11-13
    opencv 图像平移
  • Css3怎么实现图片空间旋转
    这篇文章主要介绍了Css3怎么实现图片空间旋转的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Css3怎么实现图片空间旋转文章都会有所收获,下面我们一起来看看吧。transfor...
    99+
    2024-04-02
  • css3图片翻转特效怎么实现
    本篇内容介绍了“css3图片翻转特效怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • css3怎么实现图片阴影效果
    这篇文章主要讲解了“css3怎么实现图片阴影效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3怎么实现图片阴影效果”吧!css3实现阴影属性有:1、...
    99+
    2024-04-02
  • DIV怎么实现图片水平垂直居中
    这篇文章主要讲解了“DIV怎么实现图片水平垂直居中”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“DIV怎么实现图片水平垂直居中”吧!第一种:全CSS控制,层漂浮(适用于做登陆页面) 代码如下...
    99+
    2023-06-08
  • 怎么通过HTML5 Canvas实现图片的平移及旋转变化
    小编给大家分享一下怎么通过HTML5 Canvas实现图片的平移及旋转变化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!平移变换translate()平移变换,故...
    99+
    2023-06-09
  • css怎么实现背景图片平铺
    这篇文章主要介绍了css怎么实现背景图片平铺,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   我们首先来看一下css设置背景图片平铺方式...
    99+
    2024-04-02
  • CSS中怎么实现鼠标移动切换图片
    本篇文章为大家展示了CSS中怎么实现鼠标移动切换图片,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。<!DOCTYPE html PUBLI...
    99+
    2024-04-02
  • Canvas如何实现图片的平移及旋转变化
    这篇文章主要介绍了Canvas如何实现图片的平移及旋转变化,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 平移变换translate() ...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作