文 | 本刊见习记者 赵姝焱

编辑 | 崔婧

当一种新的颠覆式技术出现，是投靠大平台还是坚持走独立的道路？

HTML5（下称H5）火了。在多数人还没完全弄清楚什么是H5时，它已悄无声息地潜入移动端，并渐呈燎原之势火速席卷微信朋友圈。

以前，H5页面在朋友圈的分享还是一些公众号的文章，但很快，企业就嗅到了商机。他们发现把会议邀请、活动策划等商业信息制作成有趣的H5页面，或者是制作一个H5小游戏，通过用户分享后传播效率更高。

当然，作为一项新兴技术，H5绝不仅仅是卡片式营销或小游戏而已，它将催生新的应用生态圈。这直接吸引了互联网巨头的不断靠拢，百度直达号、腾讯QQX5内核、搜狐快

最近华子名声响亮，各种短视频都充满了大金链子与华子。结合实际教学需要，我也来凑一个热度，使用CSS提供动画与3D变形属性设计一个可以旋转的3D中华烟盒。实际效果如下图所示：

3D旋转烟盒效果如上图所示，该模型主要使用CSS animation动画属性与transform属性设计并实现效果。以下对实现该效果的主要技术与部分核心代码进行详细描述与说明。

动画效果实现技术

本例烟盒旋转效果使用animation属性进行设计，该属性值由三部分组成，分别是动画名称、动画执行实现及执行次数。如animation:rotate 5s infinite;

作者：前端小智来源： 大迁世界

为了让大家编程更轻松一些，本挑选一些有用的但相对比较少见有用的技巧。废话不多说，开车了。

学海无涯，不要沉浸在知识的海洋里，迷失自己。

要知道自己想要什么，抓住重点，不忘初心。

这个世界上百分之20的人，掌握着百分之80的财富。

接下来一系列教程，就带领大家抓住重点，一起做那百分之20的人。

往期知识点回顾：

项目/技术

一、跨域

1、同源策略

浏览器同源策略限制请求

同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

HTML5规范围绕着如何使用新增标记定义了大量Javascript API；其中一些API与DOM重叠，定义了浏览器应该支持的DOM扩展；

从HTML4开始，在Web开发领域，有一个非常大的应用，就是滥用class属性，一方面可以通过它为元素添加样式，另一方面还可以用它表示元素的语义；于是，开发人员会用大量的Javascript代码来操作CSS类，比如动态修改类或者搜索文档中具有给定类或给定的一组类的元素，等等这些操作；为了让开发人员适应并增加对class属性的新的认识，HTML5新增了很多API，致力于简化CSS类的用法；

最近我在CodePen上发现了一个纯CSS实现，具有渐变倒影和3D旋转效果的栅栏动画，他的实现方式是：利用10个<div>元素创建10个栅条，接着再复制整份<div>元素，并创建一个渐变遮罩形成渐变效果，以此作为栅栏的倒影。

这听起来有点像用左脚的脚趾去抓你的右耳背部（译者理解：表达的意思应该是用了复杂的方式去处理一个其实可以用简单方式达成的事情）！更不用说这种渐变遮罩的方式根本不适用于非单一颜色的背景。难道没有基于CSS的更好的方法吗？

前言

本文主要介绍H5新增内容以及CSS3中的新特性。在H5方面主要介绍拓展了哪些内容，CSS3方面介绍动画及转换。

relative或absolute

马克-to-win：如何放置绝对正中的位置。项目心得：正常来讲，div绝对定位默认的是以body标签为参照，而且无论你的绝对定位的div外面有几层父div，但是当你把其中一个父div设置成position:relative;那么被绝对定位的div就会以这个div为参照。比如项目中 index.html中的mysubtop1这个div就必须设成relative，它里面的div才会以它为参照系。
例 1.4.1

很多前端小伙伴都知道关于页面动画时候，transform 性能好。

但是为什么 transform 性能好，认知可能停留在这些信息上：

1、transform 不会引起回流与重绘

2、transform 会进行 GPU 加速

没了……

上面的答案是对的，但不够深入，我们现在进行更详细的说明，让你了解的更加透彻。