粉阿吉整理(8)之------CSS3的2D与3D

c3的2D与3D

- 2D

与背景相关的样式

background-clip:   指定背景的显示范围/裁切位置border-box/padding-box/content-box
background-origin: 指定绘制背景图像时的起点 border-box/padding-box/content-box 
background-size:   指定背景中图像的尺寸 auto | <长度值> | <百分比> | cover | contain 

1. 在一个元素中添加多张背景图片，第一个定义的背景图片在最上面的，最后定义的是在最下面的。
2. 使用background-repeat和background-position可以单独指定背景图像中某个文件的平铺方式与放置位置
3. 缩写时，background-size必须写在background-position后，且用 / 链接。

1.1 渐变 CSS3 Gradient

CSS3 Gradient

• 分为线性渐变(linear)和径向渐变(radial)，不同的渲染引擎实现渐变的语法不同。
• 为了创建一个线性渐变，必须至少定义两种颜色结点。颜色结点即想要呈现平稳过渡的颜色。同时，也可以设置一个起点和一个方向（或一个角度）。第一个参数指定渐变方向，可以用“角度”关键词或“英文”表示

linear-gradient(to bottom, #fff ,#999)

/* linear-gradient 渐变类型，径向为radial-gradient
* to bottom  渐变方向，等价为180deg
* #fff,#999  表示颜色的起始点和结束点，可以有两至多个色值
*/

角度	用英文	作用
0deg	to top	从下向上
90deg	to right	从左向右
180deg	to bottom	从上向下
270deg	to left	从右向左
	to top left	右下角向左上角
	to top right	左下角向右上角

#grad{
     
	background:-webkit-linear-gradient(left,red,blue) /* Safari 5.1-6.0 */
	background:-o-linear-gradient(right,red,blue)  /* Opera 11.1-12.0 */
	background:-moz-linear-gradient(right,red,blue)  /* Firefox 3.6-15 */
	background:linear-gradient(to right,red,blue)  /* 标准的语法 */
}

第一个参数省略时，默认为“180deg”，等同于“to bottom”。
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
background-image:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet);

1.2 透明度Transparency

CSS3 渐变也支持透明度，可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 来定义颜色结点。
rgba() 中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0完全透明，1完全不透明。

• c3新提的属性值，要把前缀加在属性值前，属性就加给属性。
  
  repeating-linear-gradient() 函数用于重复线性渐变：

#grad {
     
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);  
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);  
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); 
 }

1.3 径向渐变radial

background: radial-gradient(center, shape size, start-color, ..., last-color); 

渐变的形状是 ellipse 表示椭圆 circle 圆

福利来咯，终极CSS渐变生成器在此！

1.4 IE渐变

IE浏览器实现渐变只能使用IE自己的滤镜去实现，兼容ie，复制这个就好

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);  
/*
*第一个参数：渐变起始位置的颜色         
*第二个参数：渐变终止位置的颜色         
*第三个参数：渐变的类型    0 代表竖向渐变   1  代表横向渐变
*/

2.1 2D变换

它如何工作？ 转换是使元素改变形状、尺寸和位置的一种效果，可以使用 2D 或 3D 转换元素
转换概念当中：是没有display这么一说的，是通过改变元素的透明度去实现从无到有的。

旋转函数  transform:rotate()  取值度数 正顺逆负  
		 /*例、值rotate(30deg) 把元素顺时针旋转 30 度*/
		 
旋转的基点  Transform-origin:left top 

倾斜函数  transform:skew(20deg 30deg) /skewX(20deg) skewY(20deg)    
         /*取值度数: 一个值代表水平, 俩值是一水平一垂直 */
    /*例、值skew(30deg,20deg) 围绕 X 轴把元素翻转倾斜/扭曲30 度,围绕 Y 轴翻转（倾斜/扭曲）20 度。*/

缩放函数 transform:scale() /scaleX()scaleY()  取正数负数和小数  
   /*例、值scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。*/

位移函数 translate() translateX() translateY()可以取负值
   /*例、值 translate(50px,100px) */
 
 过渡   transition
/* Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
   Safari 需要前缀 -webkit-。
    注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。 注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。*/

2.2 过渡transition

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定，两项内容，规定您**希望把效果添加到哪个 CSS 属性上和规定效果的时长**。

过渡通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下， 当元素从一种样式变换为另一种样式时为元素添加效果。

过渡的生成器来了~

运动样式 transition-property: (all || [attr] || none)
运动时间  transition-duration: 
延迟时间  transition-delay: 
运动形式速度 transition-timing-function:  
ease:（逐渐变慢）默认值 linear:（匀速）
ease-in:(加速) ease-out:（减速） ease-in-out:（先加速后减速）

3. Something~

3.1 不想有划过或者点击的效果的话 pointer-events 直译为指针事件

    pointer-events:auto/none 
设置为none后，有如下相关特性: 
		阻止用户的点击动作产生任何效果
		阻止缺省鼠标指针的显示 
		阻止CSS里的hover和active状态的变化触发事件 
		阻止JavaScript点击动作触发的事件

3.2 属性定义当元素不面向屏幕时是否可见 backface-visibility

backface-visibility:visible|hidden;
/* visible 背面是可见的 hidden 背面是不可见的。*/

- 3D

4. 3D转换 transform

语法：transform： rotate3d()/translate3d()

旋转  rotate3d(x,y,z,angle): 四个值 xyz是否旋转 旋转角度 
平移  translate3d(x,y,z): 三个值 平移多少

rotate3d(x,y,z,angle)
x:  在x轴是否旋转，是为1，否为0 
y:  在y轴是否旋转，是为1，否为0 
z:  在z轴是否旋转，是为1，否为0 

angle:旋转角度 
 rotateX(angle)     定义沿 X 轴的 3D 旋转。正值前，负值后 
 rotateY(angle)     定义沿 Y 轴的 3D 旋转。正值右，负值左 
 rotateZ(angle)     定义沿 Z 轴的 3D 旋转。
 
translate3d(x,y,z) 
 translateX(x)     定义 3D 转化，仅使用用于 X 轴的值。 
 translateY(y)     定义 3D 转化，仅使用用于 Y 轴的值。 
 translateZ(z)     定义 3D 转化，仅使用用于 Z 轴的值。

5. 景深 perspective

设置从何处查看一个元素的角度设置景深等于设置了一个3d空间

语法： perspective:number|none;

number  元素距离视图的距离，以像素计。         
none  默认值。与 0 相同。不设置透视。

6. 视点 perspective-origin

语法：perspective-origin:50% 50%;

表示浏览器从正中心观察这个世界

7. 被嵌套元素如何在 3D 空间中显示把当前的元素从2d转换成3d transform-style

语法：transform-style: flat|preserve-3d;

flat           表示所有子元素在2D平面呈现          
preserve-3d    表示所有子元素在3D空间中呈现

8. 创建动画 @keyframes

语法：@keyframes animationname {keyframes-selector {css-styles;}}

keyframes-selector   动画持续时间的百分比  

@keyframes 起名字{
     
                0%  {
     top:0px;}
               25%  {
     top:200px;}
               50%  {
     top:100px;}
               75%  {
     top:200px;}
              100%  {
     top:0px;}
        }

9. 动画属性的简写属性 用动画 animation

语法：animation:name duration timing-function delay iteration-count

name   动画名称          
duration   动画指定需要多少秒或毫秒完成时间                   
timing-function    动画效果的速度          
delay     延时几秒再动          
iteration-count:value/infinite   动画播放次数          
animation-direction: normal|alternate;  是否反向播放动画          
animation-play-state: paused|running;  动画正在运行还是暂停

10. 动画关键帧 animation-timing-function

指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

animation-timing-function:  step-start/step-end

step-start 动画执行时为开始左端点的部分为开始。
step-end 动画执行时以结尾端点为开始，默认值为 end。