015 3D动画和盒阴影及滤镜样式

最新推荐文章于 2024-11-01 12:26:05 发布

qq_46230474

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量195

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_46230474/article/details/104868158

版权

								**015  3D动画和盒阴影及滤镜样式**

创造3D物体,或是展示一个物体在三维空间中的运动, 基础条件是创造一个3维坐标系

transform-style: preserve-3d;

perspective 只能给父级允许改变3D元素查看3D视图其【子元素】会获得透视效果只影响3D转换元素

perspective: 1000px;值可以自己设置

  <style>
        .fa{
            width: 300px;
            height: 300px;
            margin: 50px auto;
            /* background-color: pink; */
            transform-style: preserve-3d;
            transform: translateZ(100px);
            /*  perspective 只能给父级  */
            /* 允许改变3D元素查看3D视图
            其【子元素】会获得透视效果
            只影响3D转换元素 */
            perspective: 1000px;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translateZ(100px);
        }
    </style>
    <body>
    <div class="fa">

        <div class="son"></div>
    </div>

3D立方体

 <style>
        body{
            height: 1000px;
            渐变
            background: linear-gradient(#fff 0%,rgb(88, 173, 223) 100%) no-repeat;
            透明度
            opacity: 0.5;
        }
        .fa{
            width: 400px;
            margin: 100px auto;
            /* position: relative;; */
            transform-style:preserve-3d ;
            /* perspective: 1000px; */
            position: absolute;
            transform: rotateX(-10deg) rotateY(-40deg);
           animation: div 10s linear initial;
        }
        
        .fa>div{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            border: 1px solid #ccc;
            /* background: rgba(123,169,201,.3); */
            position: absolute;
            font-size: 40px;
         
        }
        .qq{
            /* transition: iop 10s linear initial; */
            transform: translateY(-100px) rotateX(90deg);
            /* 如果设置图片背景就不能再父级加背景颜色 */
            background: url(https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2813397494,178486986&fm=26&gp=0.jpg) center;
        }
        .ww{
            /*位移 */
            transform: translateZ(100px);
        }
        .ee{
            transform: translateX(-100px) rotateY(-90deg);
        }
        .rr{
            transform: translateX(100px) rotateY(90deg);
        }
        .tt{
            transform: translateZ(-100px) rotate(180deg);
        }
        .yy{
            transform: translateY(100px) rotateX(-90deg);
        }
    </style>
    <body>
    <div class="fa">
        <div class="qq">1</div>
        <div class="ww">2</div>
        <div class="ee">3</div>
        <div class="rr">4</div>
        <div class="tt">5</div>
        <div class="yy">6</div>
    </div>

盒阴影 box-shadow: ;

box-shadow: 盒·阴影默认值为 none;

h-shadow 水平阴影的偏移量【必须有】

v-shadow 垂直阴影的偏移量【必须有】

模糊距离 blur

阴影尺寸 spread

color:阴影颜色

outset/inset 外、内阴影默认值outset

box-shadow:2px 1px 2px yellow inset;

文字阴影 text-shadow

box-shadow: 盒·阴影默认值为 none;

h-shadow 水平阴影的偏移量【必须有】

v-shadow 垂直阴影的偏移量【必须有】

color:阴影颜色

text-shadow: 3px 4px 2px yellowgreen ;

滤镜样式详解

filter:滤镜属性默认值 none;

blur 高斯模糊值越大越模糊

filter: brightness(%) 亮度; 默认值是100% 0%会全黑，大于100%越来越亮

filter: contrast();图片对比度默认值是100% 0%会全灰大于100%对比度会越来越强

filter: drop-shadow 图片阴影( h-shadow 水平阴影的偏移量 v-shadow 垂直阴影的偏移量, 模糊距离 blur)

filter: drop-shadow(3px 5px 5px );

filter: grayscale(%) 灰度默认值0% 100%全灰;

filter: hue-rotate(dedg) 色相旋转默认值0deg;没有最大值超过360deg 相当于绕一圈

filter: invert(%);反转输入图像 0%默认值 100%会完全反转

filter: opacity(%);透明度 100%默认值 0%完全透明与opacity很像，不同之处在于通过filter，一些浏览器会提供硬件速度

filter: saturate();饱和度100%默认值 0%完全不饱和，超过100%有更高的饱和度

filter: sepia();深褐色 0%默认值 100%就会变成完全的深褐色

  <style>
        img{
            /* filter:滤镜属性 默认值 none; */
            /* blur 高斯模糊  值越大越模糊*/
            /* filter:blur(30px); */

            /* filter: brightness(%) 亮度; 默认值是100% 0%会全黑，大于100%越来越亮 */
            /* filter: brightness(10%);  */

            /*filter: contrast();图片对比度   默认值是100% 0%会全灰 大于100%对比度会越来越强*/
            /* filter: contrast(100%); */

             /* filter: drop-shadow 图片阴影( h-shadow 水平阴影的偏移量
             v-shadow 垂直阴影的偏移量, 模糊距离 blur); */
             /* filter: drop-shadow(3px 5px 5px ); */

              /* filter: grayscale(%) 灰度 默认值0% 100%全灰; */
              /* filter: grayscale(0%); */

              /* filter: hue-rotate(dedg) 色相旋转 默认值0deg;没有最大值 超过360deg 相当于绕一圈 */
              /* filter: hue-rotate(10deg) */

              
              /* filter: invert(%);反转输入图像 0%默认值 100%会完全反转 */
              /* filter: invert(1%);  */

              /* filter: opacity(%);透明度 100%默认值 0%完全透明 与opacity很像，不同之处
              在于通过filter，一些浏览器会提供硬件速度 */
              /* filter: opacity(100%); */

              /* filter: saturate();饱和度100%默认值 0%完全不饱和，超过100%有更高的饱和度  */
              /* filter: saturate(100%); */

              /* filter: sepia();深褐色 0%默认值 100%就会变成完全的深褐色 */
              filter: sepia(100%);

              
        }
    </style>
</head>
<body>
    <img src="http://img0.imgtn.bdimg.com/it/u=1832270622,186182562&fm=26&gp=0.jpg" alt="">
</body>
</html>