3D动画和盒阴影及遮罩

3D动画

transform:rotate

.box{
        width: 300px;
        height: 300px;
        margin: 200px auto;
        background-color:skyblue;
        transform:rotate(45deg);
}
/*rota默认是绕着rotateZ轴旋转的,那我们想让看到立体效果是不是得换个轴.
我们也可以让盒子绕着X轴和Y轴进行旋转,
Y轴旋转是不是有点像是我们去翻书,然后把这本书翻开,是不是绕着我们Y轴进行旋转?*/

所以让盒子绕着Y轴旋转,一般是看不到立体效果的,要像看到立体效果,必须要有景深(近大远小)的概念

perspective:n px;距离盒子远处去进行观察,定义透视.

一般加到父级盒子上,在父级盒子中观察子盒子的立体效果

恰当的距离一般是600px-1000px,1000px大概20厘米的距离就差不多.

透视原点

默认情况下,假定观察者的视线与应用透视元素相交于元素的中心.

用术语来说,这意味着"消失点"在元素的中心.

可以通过perspective-origin来修改消失点的位置.

该属性与transform-origin类似,可以接受x/y坐标值(带关键字top,left.right.bottom),百分比或者长度值.

当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身，它是和perspective属性一起使用的，而且只影响 3D 转换元素

当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身，它是和perspective属性一起使用的，而且只影响 3D 转换元素

<div class="wrap">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>

    .wrap{
            perspective:1000px ;
            perspective-origin: 0 0;
            width: 600px;
            height: 600px;
            background-color: tomato;
            margin: 100px auto;
        }
        .son1{
            width: 200px;
            height: 200px;
            background-color: turquoise;
            transform: rotateX(40deg);
        }
        .son2{
            width: 200px;
            height: 200px;
            background-color: green;
        }

#### 3d物体的制作方式

1. 旋转物体 绕着X/Y轴进行旋转.
2. 站在父级的空间去进行观测,并且有一定的视距perspective.

开启大盒子的3D空间

transform-style: preserve-3d;

盒子阴影-box-shadow

盒阴影属性介绍

盒阴影是CSS3中专门用来修饰元素边缘的，较之CSS2.1及之前的border，outline等属性，盒阴影既不会影响网页的整体布局，也能有更多的表现形式

我们可以简单的整个网页内容进行一个分析，网页的布局就如同是把一个个的瓷砖贴在地板上，用户则是永远趴在天花板上看下面的瓷砖

盒阴影属性详解

box-shadow：xOffset水平方向偏移 yOffset垂直方向偏移 burlLehgth阴影模糊距离 spread阴影缩放 color阴影颜色 outset 阴影显示方式;

.wrap{
            width: 200px;
            height: 200px;
            background-color: pink;
            box-shadow：0px 0px 0 0 blue;
/*盒阴影:水平方向不偏移  垂直方向不偏移 阴影模糊程度为0 阴影缩放为0 阴影颜色为蓝色 外部显示阴影*/
    
    /*看似没有任何效果，原因其实很简单，因为此时影子的大小与元素一致，而且没有给影子设置偏移，那么以用户的从上往下看的视角来看，元素的影子全部都被元素本身给遮挡住了
而元素的xOffset属性值的作用就是把这个影子在原来的位置上设置一个偏移，当Xoffset的值为正值时，影子向右偏移，xOffset为负值时，影子向左偏移*/
        }
    <div class="wrap"></div>

offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。

offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。

blur：阴影模糊度，指的是完全颜色到消失颜色的一个长度.不能取负数。此值的显示效果就好像是在原来的影子周围加上了一条有模糊渐变效果的边框，它能使影子看上去更大并且具有朦胧的效果，即便在元素没有偏移的时候，因为影子本身更大了，所以也能在元素的周围看到一层朦胧的蓝色光圈

spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。

color:影子的颜色，此处颜色可设置渐变色、英语单词、rgb、rgba、十六进制等，作用就是改变影子的颜色;默认黑色

inset表示添加内阴影，默认为外阴影outset。但是如果给盒阴影加上inset，则影子的显示就如同在元素的边缘向内部蔓延一般，此时影子的大小会遮盖部分元素的内容

多个阴影的写法

逗号隔开

box-shadow:10px 10px 10px 10px #ffcc33,-10px -10px 10px 10px #9933ff;逗号隔开

box-shadow:10px 10px 10px 10px #ffcc33,-10px -10px 10px 10px #9933ff;

滤镜-filter

.wrap{
        width: 400px;
        height: 400px;
        background: url(1.jpg) no-repeat center/cover;
        margin: 30px auto;
        transition: 0.5s
        }
    wrap:hover{
       filter:brightness(1.5);/*亮度
    当倍数值大于1的时候元素会变亮，小于1的时候元素会变暗
该属性的作用为调整元素当前的亮度，一般来说可以适用于鼠标悬浮到某元素时的提醒作用*/
     }
    <div class="wrap"></div>

1. 对比度 filter:contrast(百分比);默认是100%所谓对比度，简单理解的话就是一个区域里面每个颜色都会变得格外显眼，黑的更黑，白的更白
2. 模糊 filter：blur（模糊半径）像素给图像设置高斯模糊。模糊半径的值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
3. 灰色色阶 filter：grayscale(百分比)默认是0%该属性的作用较为简单，就是将一个颜色复杂的区域改造成一个只有黑白二色的区域。圆括号里面的值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
4. 褐色色阶 filter：sepia(百分比)默认是0%该属性的作用同上，都是将某个区域的颜色进行简化，该属性会将一个颜色丰富的区域变成一种老黑白照片效果，让图片有一种轻微泛黄的样子
5. 饱和度filter：saturate（%）；转换图像饱和度。圆括号里面的值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。随着饱和度的增加，颜色就会更“清楚”。饱和度越小，颜色就会越“淡”；

遮罩

遮住一部分,只露出一部分表现效果

css3的属性,不重要,兼容性也不好,IE浏览器不支持,webkit内核的浏览器(包括chrome、safari、IOS、android)需要添加-webkit-前缀。要特别注意的是，firefox浏览器也支持webkit-mask属性

各种游览器对我们写出来的效果不一样.各种标准更新迭代也很快,对新标准的支持程度也不一.所以我你们要写出兼容性前缀要它更好的识别.

.box{
            width: 300px;
            height: 300px;
            background:url("1.jpg") no-repeat center/cover;
            margin: 100px auto 0;
            -webkit-mask-image:linear-gradient(red,blue);
        }
            /*此时没有任何效果,打开控制台可以看到我们代码运行已经成功了.
              可是为什么没有效果呢?此时我们就要去讲,遮罩用什么遮的呢?
              我们要用transparent透明去遮住图片.
         遮罩mask的功能就是使用透明的图片或渐变遮罩元素的背景*/

-webkit-mask-image:linear-gradient(red,transparent);
/*这就有点相当于我们滤镜了,我们去给背景添加一个颜色*/

body{ background-color: skyblue ;}

-webkit-mask-image:radial-gradient(red,transparent)
/*我们还可以去写写百分比.*/

-webkit-mask-image:radial-gradient(red 50%,transparent 50%);

ps:遮罩可以用透明png图片实现去遮罩

遮罩mask是一个复合属性，

mask-image,默认值为none，值为透明图片，或透明渐变

mask-repeat,默认值为repeat，可选值与background-repeat相同

mask-position.默认值为0 0，可选值与background-position相同

mask-clip,默认值为border-box，可选值与background-clip相同

mask-origin,默认值为border-box，可选值与background-origin相同

mask-size,默认值为auto，可选值与background-size相同