rotate：通过指定的角度参数对原元素指定一个2D rotation（2D旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):

-ms-transform:rotate(7deg); //-ms代表ie内核识别码

-moz-transform:rotate(7deg); //-moz代表火狐内核识别码

-webkit-transform:rotate(7deg); //代表谷歌【chrome】/苹果【safari】内核识别码

-o-transform:rotate(7deg); //-o代表欧朋【opera】内核识别码

transform:rotate(7deg); //统一标识语句。这句话也写下去，符合w3c标准

span属于行内元素,一开始旋转不需要display:block,是因为旋转的是div这个块,而span被包含在div内,旋转时不受影响,后面旋转却是单独针对文本,所以需要将行内元素转变成块级元素

首先是position:absolute, 固定布局，top:50%,left:50%,你会发现这个块状元素并没有居中，

但是块状元素的左上角是相对于画面居中的，transform:translate(-50%, -50%)的作用是相对于块状元素本身发生位移，分别会向左向上移动块状元素自身的50%，这时你会发现块状元素的中心位置移到了原来的左上角位置，所以居中了

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name

• animation-duration

• animation-timing-function

• animation-delay

• animation-iteration-count

• animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值：	none 0 ease 0 1 normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animation="mymove 5s infinite"

语法

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

定义和用法

text-shadow 属性向文本设置阴影。

默认值：	none
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.textShadow="2px 2px #ff0000"

语法

text-shadow: h-shadow v-shadow blur color;

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

值	描述

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊的距离。

color

可选。阴影的颜色。参阅 CSS 颜色值。

定义和用法

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

默认值：	flat
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.transformStyle="preserve-3d"

语法

transform-style: flat|preserve-3d;

值	描述
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

伪元素的由两个冒号::开头，然后是伪元素的名称 。

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

1、x和y应该表示扭曲方向，以矩形为例，作两个对边的垂线，当skewX改变时，上下边作的垂线与y轴（竖直方向）角度0度，左右边作的垂线与x轴（横向方向）为改变角度.
2、改变skewX相当于横向拉矩形，改变skewY相当于纵向拉矩形.

这里的水平方向是围绕着水平横向扭曲或旋转，那就是上下扭曲，围绕着垂直的扭曲那就是左右互相扭曲或旋转。

这里的水平方向为箭头是横方向，竖直方向理解为箭头是竖方向

skew(x,y)，第一个参数是水平扭曲，正值是往右边扭曲，负值是往左边扭曲，第二个参数是垂直扭曲，正值是往下扭曲，负值是往上扭曲，原点默认为中心点。第二个参数不设置默认为0。垂直方向不扭曲。

transform:skew(x,y)是改变元素的形状，不会让它旋转，它是让元素以其中心位置，围绕X轴与Y轴倾斜一定的角度。它还有skewY()/skewX()是单独让X轴或者Y轴倾斜 单位是deg；

x为正逆时针，为负顺时针；y正好相反；
Skew()具有三种情况：
1、skew(x,y)第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）
3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

投影： box-shadow:0 5px 0 #B64B41;

导航分割线伪装元素：

.nav li::after{

content: '';

position: absolute; width: 1px; height: 13px; top: 18px; right: 0;

background-image: linear-gradient(to right, rgba(255,255,255,.5), grey);

}

.nav li:last-child::after{

background: none;

}

     

点击a标签里的链接  获取#brand 再用target将样式给到id为brand的元素里的内容

#brand:target

columns：<column-width>(列宽) || <column-count>（列数） <column-width> 主要用来定义多列中每列的宽度 <column-count> 主要用来定义多列中的列数 如：columns: 200px 2;

若 （1）flex-direction:row 则用justify-content控制方向 （2）flex-direction:column 则用align-items控制方向

none：不显示列与列之间的分隔线。设置的分隔线宽度和颜色属性会被忽略。 hidden：不显示列与列之间的分隔线。设置的分隔线宽度和颜色属性会被忽略。 dotted：列之间的分隔线显示为圆角的矩形。圆角的半径等于分隔线宽度的一半。 dashed：列之间的分隔线显示为直角矩形组成的虚线。 solid：列之间的分隔线显示为一条笔直的直线。 double：列之间的分隔线显示为两条直线，两条直线之间有一些间隙。两条直线的宽度和间隙宽度的总和等于column-rule-width属性指定的宽度。 groove：列之间的分隔线显示为内陷浮雕效果。 ridge：列之间的分隔线显示为外凸浮雕效果。 inset：列之间的分隔线显示为内斜面效果。 outset：列之间的分隔线显示为外斜面效果。 　 column-rule-style属性的初始值为none。

这个效果是这么实现的： 1、box背景色设为橙色的圆形 2、box中子元素包括单选按钮radio（默认样式）和span（背景为白色圆形，我们的自定义样式），但是radio不显示（因为是完全透明的） 3、被选中的单选按钮和span会显示（完全不透明），而未被选中的单选按钮不显示（因为是完全透明的）

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： input:not([type="submit"]){ border:1px solid red; }

任务 1、通过CSS3的@font-face属性引入本地字体 2、调用自定义的字体 3、设置3D舞台布景 4、给3D舞台布景设置过渡动画效果 5、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果 6、给3D舞台中“.three-d-box”设置过渡与变形效果 7、给导航设置3D前，与3D后变形效果 8、设置导航当前状态与悬浮状态下的背景效果 9、显示下拉导航菜单，并其设置一个变形效果 ?不会了怎么办 提示1： 使用@font-face引入本地字体，本地字体的路径为： http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu 同时提供自定义字体： “sansation_regular-webfont.eot”、“sansation_regular-webfont.woff”、“sansation_regular-webfont.ttf”和“sansation_regular-webfont.svg” 提示2： 通过font-family调用自定义的字体名“sansationregular”。 提示3： 在元素”.three-d”上使用“perspective”给元素设置3D舞台布景，并且将其值设置为”200” 提示4： 通过transition给3D舞台设置过渡动画，设置的参数为所有属性“all”,过渡时间持续“0.07s”，使用的过渡函数为“linear”。 提示5： 给不是当前状态的3D舞台的悬浮与聚焦状态设置旋转效果，也就是“.three-d:not(.active):hover”和“.three-d:not(.active):focus”状态下的“.three-d-box”设置z轴位移“-25px”，X轴旋转“90deg”。 提示6： 给3D舞台中的“.three-d-box”元素设置过渡效果，并且对其Z设置一个“-25px”旋转。 提示7： 在.front”元素上设置X轴的旋转，旋转度为0，同时给Z轴位移25px。另外给“.back”元素上设置X轴的旋转，旋转度为-90deg，同时Z轴位移25px。 提示8： 通过CSS的渐变与背景尺寸实现导航当前状态与悬浮状态下的斑纹背景效果。