background、转换、过渡

//----------------------------------
            background: url("CSS3%20DAY%2003/images/baby0.jpg") no-repeat;
            /*cover:不改变图片的比例，完全放大填充，溢出隐藏*/
            /*background-size: cover;*/
            /*contain:不改变图片的比例，放大到一边达到100%，另一个方向不管*/
            /*background-size: contain ;*/
            /*100% 100%:改变图片的比例，双边都放大到100%*/
            background-size: 100% 100%;
            
//---------------------------------

            /*背景原点：控制背景图从哪儿开始显示*/
            /*默认值,padding也有背景图*/
            /*background-origin: padding-box;*/
            /*边框开始有背景图*/
            /*background-origin: border-box;*/
            /*只有内容区域有背景图*/
            background-origin: content-box;
            
//----------------------------------

            /*背景裁切,不改变背景的位置*/
            background-clip: content-box;
            /*三个参数：padding-box,border-box,content-box*/

//----------------------------------

//linear-gradient()

            .s{
                /*标准写法*/
                /*linear-gradient表示线性渐变的意思*/
                /*括号里面两个参数，表示从黄色渐变到绿色*/
                background-image: linear-gradient(yellow,green);
            }
            /*多颜色线性渐变*/
            .s1{
                background-image: linear-gradient(red,orange,yellow,green,cyan);
            }
            /*渐变方向，默认都是从上往下，我们可以通过设置，来更改渐变的方向*/
            /*用角度确定方向*/
            .s2{
                background-image: linear-gradient(270deg,yellow,green);
            }   
            /*用关键字确定方向*/
            .s3{
                background-image: linear-gradient(to left top,yellow,green);
            }
            /*在渐变里面，可以通过百分比，控制渐变的起点*/
            /*下面这个，就是黄色从20%地方开始渐变，绿色从40%的地方开始渐变，
            如果百分比不到100%，那么，缺少的用纯颜色填充*/
            .s4{
                background-image: linear-gradient(90deg,yellow 20%,green 40%);
            }
            
            .s5{
                background-image: linear-gradient(90deg,yellow 40%,green 40%,green 50%,blue 50%);
            }
            <!--控制得当有点像进度条-->
        
//--------------------------------

//repeating-linear-gradient():重复线性渐变，语法与线性渐变一样
//---------------------------------

//radial-gradient()

           .s{
                background-image: radial-gradient(yellow,green);
                /*基本写法*/
            }
            /*标准写法：三要素：1辐射范围2中心点3颜色起止*/
            .s1{
                /*120px表示辐射范围（半径），at后面跟的属性表示中心点*/
                background-image: radial-gradient(200px at 0 center,yellow,green);
            }
            
//-------------------------------------------

//repeating-radial-gradient():重复径向渐变，语法与径向渐变一样

<!------------------------------------>

<!--简写：transition:property duration timing-function times-->
<!--<' transition-property '>： 检索或设置对象中的参与过渡的属性 -->
<!--<' transition-duration '>： 检索或设置对象过渡的持续时间 -->
<!--<' transition-timing-function '>： 检索或设置对象中过渡的动画类型 -->
<!--<' transition-delay '>： 检索或设置对象延迟过渡的时间 -->

<!--多个属性-->
<!--缩写方式-->
transition: border-color .5s ease-in .1s,
            background-color .5s ease-in .1s,
            color .5s ease-in .1s;
        

<!--拆分方式-->

transition-property: border-color, background-color, color;
transition-duration: .5s, .5s, .5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: .1s, .1s, .1s;

<!--所有属性-->
transition:all 2s linear 1s;

//-------------------------------
transform:

2D Transform Functions：
matrix()： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵 
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
translatex()： 指定对象X轴（水平方向）的平移 
translatey()： 指定对象Y轴（垂直方向）的平移 
rotate()： 指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义 
scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 
scalex()： 指定对象X轴的（水平方向）缩放 
scaley()： 指定对象Y轴的（垂直方向）缩放 
skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
skewx()： 指定对象X轴的（水平方向）扭曲 
skewy()： 指定对象Y轴的（垂直方向）扭曲

3D Transform Functions：
matrix3d()： 以一个4x4矩阵的形式指定一个3D变换 
translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 
translatez()： 指定对象Z轴的平移 
rotate3d()： 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略 
rotatex()： 指定对象在x轴上的旋转角度 
rotatey()： 指定对象在y轴上的旋转角度 
rotatez()： 指定对象在z轴上的旋转角度 
scale3d()： 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 
scalez()： 指定对象的z轴缩放 
perspective()： 指定透视距离


//--------------------------------
transform-origin:设置或检索对象以某个原点进行转换,

该属性提供2个参数值。 
如果提供两个，第一个用于横坐标，第二个用于纵坐标。 
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。 
对应的脚本特性为transformOrigin。



//--------------------------------

perspective:透视，在电脑上相当于到屏幕的距离

//-----------------------------

transfrom-style:flat： 指定子元素位于此元素所在平面内 
                preserve-3d： 指定子元素定位在三维空间内 
                
指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

/*1.当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。 
2.决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 
3.<' transform-style '> 属性。 对应的脚本特性为transformStyle。 */

//样式
 <style>
        .box{
            width: 600px;
            height: 600px;
            margin: 100px auto;
            /*border: 1px solid #eee;*/
            font-size: 40px;
            color: white;
            text-align: center;
            line-height: 160px;
            transform-style: preserve-3d;
            perspective: 3000px;
            position: relative;
            transition: all 2s;
            transform: rotateY(45deg) rotateX(45deg);
        }
        .box:hover{
            transform: rotateY(360deg) rotateX(360deg);
        }
        .box>div{
            width: 160px;
            height: 160px;
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -80px;
            margin-top: -80px;
        }
        .one{
            background: rgba(186,175,12,0.6);
            transform: translateZ(80px);
        }
        .two{
            background: rgba(12,210,56,0.6);
            transform: translateX(-80px) rotateY(90deg);
        }
        .three{
            background: rgba(182,42,156,0.6);
            transform: translateY(-80px) rotateX(90deg);
        }

        .four{
            background: rgba(12,210,56,0.6);
            transform: translateX(80px) rotateY(-90deg);
        }
        .five{
            background: rgba(182,42,156,0.6);
            transform: translateY(80px) rotateX(-90deg);
        }
        .six{
            background: rgba(12,175,186,0.6);
            transform: translateZ(-80px);
        }
    </style>
//结构
<div class="box">
    <div class="one">洗碗</div>
    <div class="two">拖地</div>
    <div class="three">做饭</div>
    <div class="four">看电视</div>
    <div class="five">买菜</div>
    <div class="six">奖品</div>
</div>