zoukankan      html  css  js  c++  java
  • css3创建3D场景

    浏览器本身是一个2维平面,对于3D的情况,实际上是增加了一个维度(深度),所以我们需要创建一个3D场景。这时浏览器不仅仅是一个平面了,更像是一个窗口,我们透过这个窗口去观察里面的三维世界。所谓的创建3D场景,就是告诉浏览器,我们是在这个窗口的哪个角度对这个3维世界进行观察,窗口里的3维物体距离这个窗口到底有多远。

    设置好3D场景后,浏览器中的物体虽然已经变成是3维的了,但是如果我们不进行任何设置,他们看起来还是和二维的效果是一样的。所以我们需要使用一个新的属性 transform 来对这些元素进行调整,以展现出他们的3维效果。事实上对于 transform 这个属性同样也适用于2D的场景,所以为了让浏览器知道我们现在所使用的 transform 调整元素是在一个3维空间下,我们需要加上这样一个属性:transform-style:preserve-3d;-webkit-transform-style:preserve-3d;

    一个例子:

    html:

    1 <nav>
    2     <a href="#"><span data-hover="Hello">Hello</span></a>
    3 </nav>

    css:

    /*基本样式*/
    *{padding:0;margin:0;font-family:'微软雅黑';box-sizing:border-box;}
    nav{width:100%;height:200px;background:#0e83cd;padding:50px 100px;}
    a{width:160px;height:45px;display:inline-block;line-height:45px;text-align:center;text-decoration:none;margin:10px 20px;font-size:24px;}
    span{width:100%;display:inline-block;color:#fff;background:#2195de;padding:0 10px;position:relative;}
    
    /*3d效果样式*/
    a{
        -webkit-perspective:1000px;
    }
    a span{
        -webkit-transform-origin:0 0;
        -webkit-transform-style:preserve-3d;
        -webkit-transition:-webkit-transform 0.3s;
    }
    a span::before{
        content:attr(data-hover);
        position:absolute;left:0;top:100%;
        width:100%;height:100%;background:#0965a0;
        -webkit-transform-origin:0 0;
        -webkit-transform-style:preserve-3d;
        -webkit-transform:rotateX(-90deg);
        -webkit-transition:background 0.3s;
    }
    a:hover span{
        -webkit-transform:rotateX(90deg) translateY(-22px);
    }
    a:hover span::before{
        background:#2195de;
    }

    css样式分析:(这里是只针对Chrome浏览器做的demo)

    一、在需要3d效果的元素的父级创建3D场景,也就是添加下面两条属性。

    -webkit-perspective:1000px;

    -webkit-perspective-origin:(50% 50%);  --默认值,没有做设置。

    二、具体到每个3d效果的元素,需首先设置下面两条属性,

    -webkit-transform-style:preserve-3d;  --3d效果必须加上这一条,也是固定不变的一条。

    -webkit-transform-origin:(0 0);  --根据需求设置前两个参数

    然后具体添加transform的变换属性。

    三、一个疑惑,暂未找到原因

    1 a:hover span{
    2     -webkit-transform:rotateX(90deg);
    3     -webkit-transform:rotateX(90deg) translateY(-22px);
    4     -webkit-transform:translateY(-22px) rotateX(90deg);
    5 }

    在 -webkit-transform 中 rotateX(90deg) 和 translateY(-22px) 的调用顺序不同,得到的的效果会有差别。

    注意点:

    1、CSS3 perspective-origin 属性的默认值为(50% 50%),一般情况不需要设置,保持默认即可以。

    2、CSS3 transform-origin 属性的默认值为(50% 50% 0),一般情况需要根据需求设置前两个参数。

    transform-origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。

    3、注意 perspective-origin 与 transform-origin 的区分,别弄混了。

  • 相关阅读:
    Day 20 初识面向对象
    Day 16 常用模块
    Day 15 正则表达式 re模块
    D14 模块 导入模块 开发目录规范
    Day 13 迭代器,生成器,内置函数
    Day 12 递归,二分算法,推导式,匿名函数
    Day 11 闭包函数.装饰器
    D10 函数(二) 嵌套,命名空间作用域
    D09 函数(一) 返回值,参数
    Day 07 Day08 字符编码与文件处理
  • 原文地址:https://www.cnblogs.com/k11590823/p/4620562.html
Copyright © 2011-2022 走看看