CSS3转换之移位translate（CSS3）
CSS3转换之移位translate（CSS3）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3转换之移位translate</title><style>/* 移动盒子的位置： 定位 盒子的外边距 2D转换移动 */div {width: 200px;height: 200px;background-color: skyblue;/* x就是x轴上移动位置 y就是y轴上移动位置 中间用逗号分隔 *//* transform: translate(x,y); *//* transform: translate(100px, 100px); *//* 1.我们只移动x轴 *//* transform: translate(100px,0); *//* 但x，y需要大写 *//* 2.我们只移动x轴 *//* transform:translateX(100px); *//* /* /* 3.我们只移动y轴 *//* transform:translateY(100px); */}/* 2D转换之移位中，其设置的盒子不会影响其他盒子的位置 */div:first-child {transform: translate(30px, 30px);}div:last-child:hover {transform: translate(0, -5px);}div:last-child {background-color: green;}</style>
</head><body><div></div><div></div>
</body></html>
CSS3转换之移位translate（CSS3）相关推荐
- 2D转换综合写法（CSS3）
2D转换综合写法(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
- CSS3 转换解析及制作立方体相册
CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 一.它是如何工作? 转换的效果是让某个元素改变形状,大小和位置. 可以使用 2D 或 3D 转换来转换您的元素. ...
- 2D转换中心点transform-origin（CSS3）
2D转换中心点transform-origin(CSS3) <!DOCTYPE html> <html lang="en"><head>< ...
- css背景图像属性_如何将CSS3转换应用于背景图像
css背景图像属性 CSS transformations are great, but they don't (yet?) apply to background images. This arti ...
- css3 文字 特效_惊人CSS3文字效果
css3 文字 特效 Astonishing CSS3 text effects In today's tutorial, I will show you six amazing CSS3 text ...
- css3图标一直旋转样式,css3 – 问题使Bootstrap3图标旋转
灵感来自 Fontawesome,我试图使一个旋转图标与bootstrap3.它很容易通过CSS3转换和转换实现.问题是图标不围绕中心旋转.它在旋转时摆动. 代码粘贴在下面.任何人知道是什么原因导致的 ...
- CSS3 Flexbox 弹性盒与 css3 阴影效果的演示
CSS3 Flexbox 演示 CSS3 Flexbox 弹性盒与 css3 阴影效果的演示 https://www.html.cn/demo/flexbox-playground/
- CSS3 经典教程系列：CSS3 圆角（border-radius）详解
<CSS3 入门教程系列>前一篇文章详细介绍了 CSS3 RGBA 特性的用法,今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法. ...
- CSS3属性calc函数（CSS3）
CSS3属性calc函数(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
最新文章
- python中xpath定位下拉菜单_Selenium2+Python3.6实战（八）：定位下拉菜单出错，如何解决？用select或xpath定位。...
- mysql修改主从复制id_mysql主从复制设置
- android 4.4 webview 上传,android使用webview上傳文件（適配4.4以上系統）
- 使用 Python 和 Flask 实现 RESTful services
- 魔域私服怎么老服务器中断,魔域私服技术文章-服务器端比较正确的数据库解释文件...
- 1.CPU体系架构-RISC指令集和CISC指令集
- 芯片在计算机中作用是什么,芯片的主要作用
- MiCO系统开发MiCoder-IDE安装遇到的坑
- python round_Python3 round() 函数
- css实现圆形进度条加载动画
- mkdir命令 – 创建目录文件
- websocket——Firefox 无法建立到 ws://... 服务器的连接
- 【C# 基础】— 解决 winForm 引用 Adobe PDF Reader控件不显示pdf 文件 问题
- php一个循环九九乘法表代码_php双层循环(九九乘法表)
- Web前端学习笔记11：JavaScript_注释_输入输出_变量_数据类型_关键字_保留字_运算符_流程控制
- SNAT、DNAT、NPT
- Java基于JSP的家教预约平台
- 微信小程序上传组件（可同时长传图片+视频）
- 550什么意思_550是什么意思
- 在线预览PDF文件功能实现