CSS3中的Transform
CSS3中的Transform
HTML5和CSS3的火爆程度自不必说，很多同学可能说我们不是专门的Web前端工程师呢，所以并不用关心这个，但我觉得吧，做我们开发这行儿的，还是不要用这样儿的借口来为自己开脱的好，至少，我们要为了成为全栈工程师而努力不是？那么这里我们来看一下CSS3里制作动画的几个属性：变形（Transform）、转换（Transition）和动画（Animation）等。今天我们这篇文章主要介绍的是这三个属性中的第一个——变形（Transform）。
那么所谓Transform，在CSS3中主要包括一下集中：旋转Rotate、扭曲Skew、缩放Scale和移动Translate以及矩阵变形Matrix等。下面我们看下具体如何实现。
Transform语法：
transform : none | <transform-function> [ <transform-function>]*
/*也就是*/
transform: rotate | scale | skew | translate | matrix;
解释说明：
none：表示不进行变换；
<transform-function>表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要大家注意，以往我们叠加效果都是用逗号（“,”），但Transform中使用多个属性时却需要用空格隔开。
取值：
Transform属性实现了一些可用SVG实现的同样的功能，它可用于内联（inline）元素和块级（block）元素，它允许我们旋转、缩放和移动元素，他有几个属性值参数：rotate、translate、scale、skew、matrix。
一、旋转rotate
rotate()：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转）， 需现有transform-origin属性的定义。Transform-origin定义的是旋转的基点，其中angle指的是旋转角度，如果设置的值为整数表示顺时针旋转，值为负数则表示逆时针旋转。如：transform:rotate(30deg):
二、移动translate
移动translate我们分为三种情况：translate(x, y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(y)仅垂直方向移动（Y轴移动），具体使用方法如下：
1、translate(<translation-value>[, <translation-valuie>]) ：通过矢量[tx, ty]指定一个2D translation，tx是第一个过渡值参数，ty是第二个过渡值参数选项。如果未被提供，则ty以0作为它的默认值，也就是translate(x, y)，它表示对象进行评议，按照设定的x, y 参数值，当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据transform-origin改变基点。如transform:translate(100px, 20px):
2、translateX(<translate-value>) ：通过给定一个X方向的数值指定一个translation，只向X轴进行移动元素，同样，其基点是元素中心点，也可以根据transform-origin改变基点位置。如transform:translateX(100px):
3、translateY(<translate-value>) ：通过给定一个Y方向的数值指定一个translation，只向Y轴进行移动元素，基点在元素中心点，可以通过transform-origin改变基点位置。如transform:translateY(20px):
三、缩放scale
缩放scale和移动translate极其相似，它也具有三种情况：scale(x, y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放——；scaleX(x)元素仅水平缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1，元素就放大；反之其值小于1，元素就缩小。下面我们具体看看着三种情况的使用方法：
1、scale(<number>[, <number>]]) ：提供执行[sx, sy]缩放矢量的两个参数指定一个2D scale（2D缩放）。如果第二个参数未提供，则取和第一个参数一样的值。scale(X, Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；其中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X， Y两个方向的缩放倍数是一样的，并以X为准。如transform:scale(2, 1.5):
2、 scaleX(<number>) ：使用[sx, 1]缩放矢量执行缩放操作，sx作为所需参数。scaleX表示元素只在X轴（水平方向）缩放元素，它的默认值是(1, 1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。如transform:scaleX(2):
comments
一点儿感慨——读《程序员必读的职业规划书》
其实这篇博客算是交作业，但又不比像上学的时候交作业一样诚惶诚恐，所以今天我就随意写点儿我自己读完之后的看法吧，所以也叫读《程序员必读的职业规划书》有感。
首先我要坦白一件事情，就是我并不是很熟悉Easy大神（陈理捷陈老师，嗯，陈老师），时至今日，已经无法回忆起当时是如何关注到他的新浪微博的了，当然，后来他做了JobDeer我是知道的，不过也一直没有太在意，直到有天，哎呀，突然陈老师出了一本书，叫做《程序员必读的职业规划书》，嗯，我就有点儿感兴趣了（当然我直到书里肯定不会有啥福利照片）。
然后机缘巧合，看到陈老师发了个微博，说有送书的名额啥的，嗯，也该我走一回狗屎运了吧，所以就胆战心惊的填写了内容，把自己的CSDN博客和GitHub Pages链接提交了上去，然后就中了，确切的说，是中奖两次（哎呀，运气真好）。
可能在最开始拿到书的时候，有很多同学像我一样会嘟囔一句，唔，有点儿太薄了，确定不是书籍界的杜X斯咩？但是，不要被它纤薄的外表迷惑了，里面可是大有文章的（看我脸，一脸便秘的表情，不是~一脸神秘的表情！）。
于是乎 ...
comments
Read More
黑阔的Mac系统装机指南
黑阔的Mac系统装机指南
本文为译文，原文链接：http://lapwinglabs.com/blog/hacker-guide-to-setting-up-your-mac
嗯，大概就这样儿了，郑重其事的第一篇译作，一定要用心好好翻译。一来是电脑用的时间略长了然后好多东西随便扔随便扔确实打算过阵子不忙的时候重装一下系统了，二来是，之前都是自己看英文文档但是从来没翻译过，所以，嗯，差不多是时候了，翻译的不好，最开始打算是自己拿来看看，参考一下就好，如有翻译的实在令人承受不了的地方欢迎大家斧正，然后就是大家如果参考这篇文章进行重装系统的话，本人就重装系统产生的一些列问题统统都是不负责任的哟，请仔细参考原文下方的评论，可能会对电源管理产生一定的影响，慎重！
开始正文
黑阔们大多痴迷于自动化，我们希望让机器来做那些巴拉巴拉（无聊的事儿），这样儿我们就能把精力更加集中在那些有意思的事儿上了。比如，设置你的电脑（安装系统和软件）就是一个很常见的大部分工作都可以自动化但是很多人都么有注意到的地方。
来，我们今天就来给大家讲解一些技巧，帮助大家伙儿完成自动初始化你的电脑。今天这篇博文的目标，就是为了实现80%的安装都自动化，让你可以轻松在几个小时内搞定你的mac，而不是像以前一样花费好几天。
先秀秀图。。。
准备工作
俗话说“工欲善其事，必先利其器”，俗话还说 ...
comments
Read More
正式启用自己的GitHub Pages作为新的备用技术博客
经过一番折腾，我自己的GitHub Pages终于搞定，欢迎大家收藏、交换友链啥的
博客地址：一把汤勺。
虽然这篇博客同时会发布在两个地方，自己的CSDN博客和GitHub Pages，但是估计以后首发的时候，还是会选择GitHub Pages了，当然也不是说CSDN不够好，只是最近两天遇到的事儿比较奇葩，可能个人觉得CSDN在这个方面做的还不是很出色吧，在写这篇博客的时候看到CSDN也上线了新版的Markdown编辑器，不过我还是会选择继续使用我目前的工具Mou(这么好用的工具应该不算广告的吧)，很简洁轻快的一款Markdown编辑器，支持预览功能，还不错的说，不过就是相对比CSDN的在线Markdown编辑器来说，没有那么多提示功能，所以自己还是需要再深入学习一下Markdown的语法什么的。
大致说了不少，说下这次下定决心开通GitHub Pages的原因吧，起因就是因为转载小伙伴的关于四轴飞行器的博文，然后呢，在保存博文的时候CSDN提示保存失败，无法保存，但是紧随其次的就是我的CSDN博客也打不开了，并且提示“自定义模块无法识别”之类的错误，最开始我以为是Flash模块导致的，后来把Flash模块删掉，又进行了尝试，果然。。。没好，再次被锁定，跟第一次的时候客服人员的回复一样，博文中有敏感词汇。。。但是再三检查了之后发现难不成是因为里面说到的遥控器的方式有美国手和日本手之类的？但是吧，CSDN客服人员的回复是，我们无法向您透露敏感词汇是啥，墙裂不建议您再次发布该博文 ...
comments
Read More
博客诞生记
本来我这么懒惰的人，写博客大多都是在CSDN或者博客园，CSDN更多一些吧，但最近接连两天的被封号让我表示很蛋疼了，起因就是我转载小伙伴的博客，据CSDN客服人员的回复说是因为我的博客里有“敏感词”。。。T_T! 敏感词，好吧，通篇读了好多遍了，没看到一篇关于四轴飞行器的博客到底哪里有敏感词了，唔对，CSDN客服表示说我们没法儿透露敏感词给您。。。然后我说呵呵。。。
然后我就没招儿了，而且加上老是在CSDN写博客吧，也没啥意思了，受到的限制还多，算了，懒也没有办法啊，还是要学习一下新东西的，加上最近也经常用Markdown写笔记，cold好基友他们也大多用GitHub Pages，所以嘞，干脆用起来好了，这个算是前言，不是重点，简单记录一下博客的诞生吧。
该博客采用的是Markdown形式编写，由静态博客工具Pelican生成，部署在GitHub Pages上。
参考链接:使用Pelican打造静态博客-cold's wold
Pelican介绍
Pelican是一套使用Python编写的开源静态博客生成工具，它可以让你添加文章和创建页面，可以使用Markdown reStructuredText 和 AsiiDoc 等不同的格式来抒写博客，我个人对Markdown的格式也比较喜欢，它可以让你更专注在博客的内容上，而且本身也特别简洁，嗯 ...
comments
Read More