在css 的内容中有 2D 结果 ， 也就是图片移动的 结果 ， 这里小编分享若何做出经由过程节制 2D结果实现动态图片上下移动（沿 Y 轴移动）和注重事项；
需要这些哦
电脑
英雄联盟
方式/
1起首我们 写一个页面的 hetml 架构 ， 两个 div 存放不异的图片 ， 以此 两个 div 作为对比 ， 查看结果；
文章插图
2【css控制图片沿Y轴上下移动的注意事项】先写出两个 div 的样式 ， 其实两个div都是一样了 ， 为了便利对比 ， 只是边框颜色分歧（别的 ， 若是想让 两个div 如许的块级元素在统一行 ， 需要用 display：inli-block ， 让他们变为行内块元素)；结果如 图二；
文章插图
文章插图
3然后我们起头 ， 经由过程 transform：translateY（ px）节制上下移动 ， 注重这里值是负的时 ， div 上标的目的上移动 的；结果如图二；
文章插图
文章插图
4若是是为了节制标的目的下的话 ， 就需要 transform:translate（px）;这个是正值；Y轴的偏向如图二所示；
文章插图
文章插图
5然后我们将 d2 的节制上下的属性注释失落 ， 写一个 .d2：hover 这个伪类属性 ， 节制鼠标移上触发结果；
文章插图
文章插图
6可是上面的属性如许看着一顿一顿的 ， 不敷光滑；这时我们在 d2 ， 中加上过渡属性 transition：0.1s linear；然后实现这个 图二的结果；
文章插图
文章插图
注重事项小我进修经验仅作分享；
以上内容就是css控制图片沿Y轴上下移动的注意事项的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 如何批量获取图片名称及批量更改图片名称
- 美图使用爱芯贴纸方法
- 潜水镜图片设计
- 学习工具图片设计
- 以太网控制器黄色问号的解决办法
- wps2019怎么样压缩文档中的图片减小文档体积
- css3图片动态左右移动
- Snipaste截取的图片保存在哪里？怎样自定义目录
- 如何将图片裁剪成圆形，且保存为透明背景
- 手机要怎么远程控制电视机