我觉得 CCS3 的 transform 中的学问很深,可以出不少面试题了,之前的文章谈到过 perspective 属性的位置问题,我们今天看看 rotate 的顺序,首先看看下面两个 CSS3 的 keyframe 动画:
两个动画的起始状态和结束状态都是是一摸一样的(其实就是原始位置),不同的只不过是 rotate 和 rotateX 的顺序。但是动画效果却有惊人的差别。
我觉得 CCS3 的 transform 中的学问很深,可以出不少面试题了,之前的文章谈到过 perspective 属性的位置问题,我们今天看看 rotate 的顺序,首先看看下面两个 CSS3 的 keyframe 动画:
两个动画的起始状态和结束状态都是是一摸一样的(其实就是原始位置),不同的只不过是 rotate 和 rotateX 的顺序。但是动画效果却有惊人的差别。
一开始先看个小小 demo,切换 tab 对比下!
不得不说,浏览器的多 tab(and 多窗口)设计确实是满足了用户同时浏览很多个网页的需求,但是,网上有成千上万的页面,这些页面性能又参差不齐,对于某些性能很差的页面,用户停留在这个页面倒还好,但是当用户切换了到了其他 tab 页时,有可能会出现由于性能差的页面卡死导致整个浏览器卡死甚至机器卡死,其他页面好冤,浏览器好冤,机子好冤 [汗]。
HTML 5 以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信,于是为了达到跨域通信的目的各种蛋疼的解决办法出现了,常用的有:jsonp、使用代理文件、地址栏 hash 等等,这些办法的出现在达到解决跨域问题的同时,也增加了前端页面的性能开销和维护成本。HTML5 新的标准中,增加了” Cross-Origin Resource Sharing” 特性,这个特性的出现使得跨域通信只需通过配置 http 协议头来即可解决。
Minren 哥前面已经写了一些关于这方面的 blog 了,大家也可以在团队 blog 里面参考。
http://www.alloyteam.com/2012/10/the-css3-transform-perspective-property/
介于只是介绍 perspective,没有对 css 3d transform 其他部分属性介绍说明,下面是我个人对 css3 3D 的一些个人见解,大神们莫喷。那些 rotateX 啊,scaleY 啊这些大家都能够立刻明白的我就不过多的解析了。主要有几个属性大家可能比较少用或没有理解透的为这部分的主要内容。
对于前端开发来说, 知道整个页面从开始加载到有内容展示出来的时间是很重要的事情.
通常我们要知道页面加载的时间的话. 是采用计算几个关键的时间点的方法来得出页面加载的时间. 但是这个方式存在一些问题, 比如: 我们不知道浏览器在开始解析页面之前卸载前一个文档, 解析 dns 的时间.
介绍前,先说下背景。在前端开发中,有时会为页面绑定 resize 事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定 mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在一个正常的操作中,都有可能在一个短的时间内触发非常多次事件绑定程序。而大家知道,DOM 操作时很消耗性能的,这个时候,如果你为这些事件绑定一些操作 DOM 节点的操作的话,那就会引发大量的计算,在用户看来,页面可能就一时间没有响应,这个页面一下子变卡了变慢了。甚至在 IE 下,如果你绑定的 resize 事件进行较多 DOM 操作,其高频率可能直接就使得浏览器崩溃。
以下两行语句有什么区别?
1 2 |
<div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(40deg);"> |
1 2 |
<div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);"> |
如果大家不清楚,请听我娓娓道来。
CCS3 中的 Transform 是设置界面样式和动画的一大利器。而且在 Chrome 和 FF 中还支持 3D 变换。IE9 不支持,IE10 支持。
做 Web 开发很多年了,专门做 Web 前端开发也有 8 年多了,期间自然加过很多优秀的 Web 前端 QQ 讨论群,今天跟大家推荐一个传说中氛围最好的一个,而且其中很多牛人,那就是——鬼懿 IT
今天和大家分享一下使用 CSS3 绘制腾讯 QQ 的企鹅 Logo 的过程。
网络上经常能够看到一些用 CSS3 绘制的精致图形,它们通常由矩形,圆形,椭圆,三角形, 梯形等组合而成。要想绘制我们自己的图形,就要先了解下基本图形的绘制方法了。
《parctical common lisp》的作者曾说,如果你需要一种模式,那一定是哪里出了问题。他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案。
不管是弱类型或强类型,静态或动态语言,命令式或说明式语言、每种语言都有天生的优缺点。一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些。
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2