当前位置: 首页 > news >正文

CSS平面转换-平移

平面转换-平移

属性 transform: translate(X轴移动距离, Y轴移动距离);

取值

  • 像素单位取值
  • 百分比(参照盒子自身尺寸计算结果)
  • 正负均可
    技巧
  • translate()只写一个值表示只沿着X轴移动
  • 单独设置X或Y轴距离:translateX()或translateY()

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>平面转换-平移</title><style>.father {width: 500px;height: 300px;margin: 100px  auto;border: 1px solid #000000;}.son {width: 200px;height: 100px;background-color: pink;transition: all 0.5s;}.father:hover .son {transform: translate(100px, 200px);/* 百分比参照盒子自身尺寸 *//* transform: translate(50%,100%); *//* transform: translate(-50%,100%); *//* transform: translateX(100px); */transform: translateY(200px);}</style>
</head>
<body><div class="father"><div class="son"></div></div></body>
</html>
http://www.lryc.cn/news/412121.html

相关文章:

  • Linux-3:Shell编程——基础语法(0-50%)
  • C++ --> string类模拟实现(附源码)
  • 基于PHP+MySQL组合开发的微信活动投票小程序源码系统 带完整的安装代码包以及搭建部署教程
  • 利用Arcgis设置分式标注(分子分母标注)
  • 大麦网抢票攻略:使用Python Selenium实现
  • Navicat 在整个数据库中查找字符
  • Python基础—处理时间问题
  • 如何选择合适的自动化测试工具!
  • 数字图像边缘曲率计算及特殊点检测
  • python map
  • 每日一练 - NFV部署应用环境
  • 031-GeoGebra中级篇-GeoGebra的布尔值
  • 基于Debian用户安装星火商店
  • 《计算机网络》(第8版)课后习题答案
  • 我们的网站被狗爬了!
  • docker安装与container基本使用
  • 掌握文本搜索的利器:深入解析 Linux grep 命令的强大功能
  • 【天机学堂】面试总结
  • Java中Stream操作
  • Spring Boot + MinIO 实现文件的分片上传、秒传、续传功能
  • Kafka基本概念,工作流程介绍
  • Golang | Leetcode Golang题解之第306题累加数
  • 快速排序(上)
  • 数据结构-队列
  • MySQL:操作符
  • 反序列化靶机实战serial(保姆级教程)
  • 【Git】git 从入门到实战系列(一)—— Git 的诞生,Linus 如何在 14 天内编写出 Git?
  • com.microsoft.sqlserve r:sqljdbc4:jar:4.0 was not found in......如何解决?
  • 数据集——鸢尾花介绍和使用
  • ElasticSearch第4篇(亿级中文数据量 ElasticSearch与Sphinx建索引速度、查询速度、并发性能、实测对比)