谈谈关于CSS中transform属性之scale
谈谈关于scale属性
scale是什么?
根据W3C定义 ,scale主要是进行缩放和转化:
scale能做什么?
1.1px细线
<div class="wrap">
<div class="UI-scale1"></div>
<div class="UI-scale2"></div>
<div class="UI-scale3"></div>
</div>
CSS代码
.wrap{
position: relative;
}
.UI_scale1{
position: relative;
width: 200px;
height: 50px;
border-bottom:1px solid #000;
}
.UI_scale2{
position:relative;
top: 0px;
left: 0px;
width: 200px;
height: 50px;
border-bottom: 1px solid #000;
}
@media screen and (-webkit-min-device-pixel-ratio:2){
.UI_scale2{
transform: scale(1,0.5);
transform-origin:left center;
}
}
2.页面适配
function scale(){
var origin_H = 667,
origin_W = 375,
win_H = $(window).height(),
win_W = $(window).width();
var ratio1 = win_H / origin_H ,
ratio2 = win_W / origin_W ;
if(ratio1<ratio2){
$('.page1-wrap').css({
'-webkit-transform':'scale('+ratio1+')'
})
}
else{
$('.page1-wrap').css({
'-webkit-transform':'scale('+ratio2+')'
})
}
}
3.动画(参考animate.css)
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
50% {
-webkit-transform: scale3d(1.05,1.05,1.05);
transform: scale3d(1.05,1.05,1.05)
}
100% {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
}
scale的属性会影响那些属性和布局
HTML代码
<div class="wrap">
<div class="UI-scale1"></div>
<div class="UI-scale2"></div>
<div class="UI-scale3"></div>
</div>
CSS代码
.wrap{
position: relative;
background-color: #ccc;
}
.UI_scale1{
position: relative;
top: 0px;
width: 100px;
height: 50px;
font-size:14px;
line-height: 24px;
margin-left: 50px;
padding: 50px;
border-bottom:1px solid #000;
background-color: red;
}
.UI_scale2{
position: relative;
top: 0px;
width: 100px;
height: 50px;
font-size:14px;
line-height: 24px;
margin-left: 50px;
padding: 50px;
border-bottom:1px solid #000;
transform: scale(0.5);
background: blue;
transform-origin: center center;
}
如图所示可以直接影响到所有带px的属性,但是由于scale属性不会引起重排,会导致父元素的高度和宽度都不会受到影响.
scale和zoom差异
1.zoom引起重排,scale不会引起;缩放的中心点,zoom不能更改,而scale可以更改
2.重排导致的性能
1.scale会只会引起了当前元素
2.zoom会引起重排,所以会影响全部元素
谈谈关于CSS中transform属性之scale的更多相关文章
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS中 Zoom属性
CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- CSS3中transform属性的用法
有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source print? 01 &l ...
- CSS中box-sizing属性的理解与部分用法
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...
- css中clip-path属性的运用
今天看到一位同学的需求,要在一个div中加一个小尖尖,对话时发的图片,旁边这个三角是怎么实现与图片的颜色一致,效果如下: 当然,解决这个问题有各种奇淫巧技,现在我们来看一个css属性clip-path ...
随机推荐
- 利用POST请求模拟登录豆瓣
需要用requests库 豆瓣上次更新后,就不能通过直接的requests.post()方式直接传递参数登录了.必须新建session,先GET请求,然后POST才能成功.原因未知 data参数中的四 ...
- 关于Web的一些知识,Web怎么构成?
前端学习:学习地址:黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动,下面这些都是一些学习笔记.临渊羡鱼,不如退而结网!!愿我自己学有所成,也愿每个前端爱好者学有所成 ...
- 怎么在linux上安装部署jenkins
怎么在linux上安装部署jenkins 作为一个非科班出身自学的小白,踩过很多的坑,特此留下记录 以下在虚拟机上示例 系统:linux(centos7) 操作方式:xshell连接终端操作 教程之前 ...
- tp5 git 常见命令
git clone git add . # 跟踪所有改动过的文件 git commit -m "commit message" # 提交所有更新过的文件 git checkout ...
- elasticsearch高亮之highlight原理
一.highlight简介 highlight是提升用户体验的重要手段,搜索引擎通过高亮突出命中关键字等方式,方便用户通过关键字周围的信息快速的确认是否是自己希望的结果: highlight功能通常包 ...
- Vue3+ElementPlus的一套开源前台+后台管理模板
Vue-Element-Faster 基于最新版vue.js 3.x与element-plus2.x实现的一套前台展示系统.后台管理系统模板,自带权限管理模块. API接口基于SpringBoot2. ...
- JavaWeb 08_JSP+Dao+Bean+Servlet 实现登录注册(连接数据库,验证码登录,两周内免登陆等功能)
一.数据库db_01 表usert 字段username,password 二. 目录 三. 配置信息 四. 代码 index.jsp <script type="text/j ...
- Arcgis 离线部署api 4.x的两种本地部署方法!
引言:本文用的是api4.6版本 方法一 拷贝api进去tomcat服务器用绝对地址引用 首先将下载好的api放入Tomcat服务中的Webapp下: 1 可以打开下载好的的 api46/arcg ...
- idea在新窗口中打开
IntelliJ IDEA 2018.1.4 x64版本同时打开多个窗口可以进行如下设置,找到file--Settings...,然后会弹出下面的窗口:然后注意红框里的勾选项,最后确定Apply,OK ...
- jQuery--事件绑定|委派|切换
一.事件的绑定 1.事件的绑定介绍 事件绑定: bind(type,fn) 给当前对象绑定一个事件.例如:A.bind("click",fn);类似A.click(fn) unbi ...