移动web_平面转换
平面转换
- 平面
- 平移
- 旋转
- 缩放
概念:使用transform属性实现元素的位移、旋转、缩放等效果
注意点:行内元素所有的平面转换是没有效果的
平面:
平面转换的平面指的是二维平面(2D)只有X和Y轴
例如:图片、背景图片、盒子...
默认以浏览器浏览窗口左上角为准(页面开发则以盒子左上角为准),水平向左为+X轴,水平向下为+Y轴
平移:
- transform:translate (X轴偏移量,Y轴偏移量)
取值:可以正负
1.具体的像素单位;
2.百分比(参照盒子自身尺寸)
transform:translateX();
transform:translateY();
如果translate(只有一个值) === translateX()
旋转:
- transform:rotate(角度deg) 注:一定要加角度单位deg
取值:
1.正值:顺时针旋转;
2.负值:逆时针旋转;
3.默认以Z轴旋转,转换旋转点可用 transform-origin:(方位/像素/百分比)
transform-origin: right top;
/* transform-origin: -100px -100px; */
/* transform-origin: -50% -50%; */
ps:进行多种平面转换时,一定要把旋转转换放在最后
缩放:
- transform:scale(倍数)
- transform:scale(X倍数,Y倍数)
取值:
1.大于1放大;
2.小于1缩小
(线性)渐变:
- background-image:linear-gredient([方向],参数1,参数2,参数3.....)
线性渐变:从一个方向到另外一个方向
参数是指颜色
取值:
- 参数1:方位
a.方位名词:to right,to left bottom;
b.角度deg,就不用再加to,直接设置角度 - 后面都是颜色值
仅供学习参考,如有不足请多多指正
移动web_平面转换的更多相关文章
- 屏幕实战效果解析:IPS/TFT/AMOLED/SLCD
现在手机市场上,智能手机种类繁多,手机屏幕材质也是五花八门.对于一般消费者来说,一款手机是否值得购买,除了关心它的硬件参数以外,更重要的一点就是看它的屏幕.除了屏幕尺寸以外,影响着大家对该手机的第一感 ...
- 主流屏幕对比:IPS/LTPS/CGS/IGZO/AMOLED
IPS.LTPS.CGS.IGZO.AMOLED都是什么屏幕又有什么区别?目前的手机屏幕技术实在太多,本文旨在介绍各种面板以及屏幕技术,便于大家更好地进行区分. 近年来手机屏幕技术层出不穷,早在几年前 ...
- GPS坐标转换
由于经常涉及到GPS程序的编写,现在貌似这个GPS是越来越火,越来越多的朋友在编写GPS程序,估计是个人都会遇到这个GPS坐标转换的问题,很惭愧的是,作为一个测量专业出身的学生,我还得时不时的要把这些 ...
- 支持向量机SVM原理_python sklearn建模乳腺癌细胞分类器(推荐AAA)
项目合作联系QQ:231469242 sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?cours ...
- 一位ML工程师构建深度神经网络的实用技巧
一位ML工程师构建深度神经网络的实用技巧 https://mp.weixin.qq.com/s/2gKYtona0Z6szsjaj8c9Vg 作者| Matt H/Daniel R 译者| 婉清 编辑 ...
- sklearn机器学习-泰坦尼克号
sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...
- python德国信用评分卡建模(附代码AAA推荐)
欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 python信用评分卡建模视频系列教程(附代码) 博主录制 https://study.163.com/course/i ...
- app电池续航上&&下--Android自动化测试学习历程
章节:自动化基础篇——电池续航自动化测试上&&下 主要讲解内容及笔记: 一.影响手机电量的因素和理论: 下面是一个表格:当今主流手机显示屏技术.机型与功耗对照表: 技术 类型 ...
- Unity3D游戏开发从零单排(三) - 极速创建狂拽酷炫的游戏地形
提要 在Unity工作流程内,地形是一个必不可少的重要元素.不论是游戏或虚拟现实都会使用到各种类型的地形效果,在这个教学中我们须要了解到地形的制作基本概念与,当中对于Unity的地形操作部分须要大量的 ...
- 在ArcGIS Desktop中进行三参数或七参数精确投影转换
转自 在ArcGIS Desktop中进行三参数或七参数精确投影转换 ArcGIS中定义的投影转换方法,在对数据的空间信息要求较高的工程中往往不能适用,有比较明显的偏差.在项目的前期数据准备工 ...
随机推荐
- WPF跨平台方案?
Avalonia XPF 通过我们的跨平台UI框架,释放现有WPF应用程序的全部潜力,使WPF应用程序能够在macOS和Linux上运行,而不需要昂贵和有风险的重写. 工作原理 我们使用 Fork o ...
- 使用vscode调试ros
https://blog.csdn.net/u012254599/article/details/106143540/ CMakeLists.txt set(CMAKE_BUILD_TYPE &quo ...
- SVN服务器的安装与使用
一.下载服务端和客户端安装包 百度网盘: 链接:https://pan.baidu.com/s/1QkNbLR9ZkcYPiBp6d_drlQ 提取码:tmi5 也可以在官网自行下载. 二.服务端安装 ...
- JavaScript的this指向详解
一.概念: 函数的上下文(this)由调用函数的方式决定,function是"运行时上下文"策略: 函数如果不调用,则不能确定函数的上下文. 二.规则: 对象打点调用它的方法函数, ...
- web自动化中如何使用cookie登录
做web自动化的时候,登录是关键的一步.但每次频繁的输入用户名.密码导致心态有些爆炸,所以使用cookie登录势在必行.下面是两种场景的cookie登录. 一. cookie登录1 这种是界面地址跳转 ...
- JZOJ 2483. 【GDKOI 2021提高组DAY1】回文(palindrome)
题目 求区间最长回文串长度 \(1 \le n\le 5 \times 10^5\) 题解 比较妙的做法,主要是在询问部分 预处理出以某位为中心回文半径长 \(p_i\),马拉车和二分+哈希均可 然后 ...
- Cobalt Strike 之:会话管理
郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. Co ...
- 关于dynamic类型
动态类型是从C#4才开始有的,随着DLR一起引人的. 大部分时候的行为如同object类型,对应的IL代码也是object类型. 它的特点是编译时会忽略在dynamic上进行的操作,如调用方法,读写属 ...
- [EULAR文摘] 超声腱鞘炎对RA早期诊断的价值
超声腱鞘炎对RA早期诊断的价值 Sahbudin I, et al. EULAR 2015. Present ID: OP0015. 背景:为了预测早期未分化疾病发展为类风湿关节炎(RA), EULA ...
- 2022年冬pat乙级考试题目及代码解析附部分错误原因
快考pat乙级了,花了十块钱做了一下去年冬天的pat乙级,不难,现在在花ac之后的时间来写文章,默默许愿几天后的也不难,但是我们也要做好准备啊~ B-1 谣言检测仪 分数 15 作者 陈越 单位 浙江 ...