CSS3 Tranform 3D 的应用

时间：2018-03-05 21:38:15 阅读：371 评论：0 收藏：0 [点我收藏+]

标签：nsf enter ace /word center idt 获得关系眼睛

CSS3 Tranform 3D 的应用

一、perspective 属性

1. 作用：

设置元素被查看位置的视图，类似于眼睛到屏幕的距离，一般跟 perspective-origin 共同作用在一个父元素上

属性值 = 屏幕分辩率 * 屏幕和我们眼睛的距离
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
perspective 属性只影响 3D 转换元素

2. 作用范围

舞台效果：作用在 transform 属性元素的父元素上，里面的元素都会受到改属性的影响，而且显示的效果跟子元素在父元素的位置有关系。

perspective: 200px

技术分享图片

单个元素：和 transform 属性共同作用在同一元素中：

transform: perspective(500px) rotateY(45deg);

技术分享图片

二、transform 属性

1. 属性：

translateZ: 元素向着它朝的方向（也就是其经过rotate之后） “走出去” 的距离
rotateX( xx deg)
rotateY( xx deg)
rotateZ( xx deg)
...

三、perspective-origin 属性

1. 作用

设置 3D 元素的基点位置（也就是我们眼睛看的位置），默认就是所看舞台或元素的中心

perspective-origin: 25% 75%;

四、transform-style

1. 作用

利用该属性可以使被转换的子元素（不是后代）保留其 3D 转换：

transform-style: preserve-3d / flat

五、backface-visibility

1. 作用

该属性定义当元素不面向屏幕时（前面有3d元素挡住时）是否可见，可以想象各个面连成一个实体的形状，后面的面会被前面的面挡住看不见。

backface-visibility : hidden / visible;

为每个面设置 backface-visibility: visible，默认值就是 visible

技术分享图片

为每个面设置 backface-visibility: hidden

技术分享图片

六、例子

技术分享图片

<body>
    <div class="center showbf">
        <div class="cube">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
        </div>
    <div>
</body>

.hidebf div {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.showbf div {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

.center{
    margin: auto;
    margin-top: 100px;
    width: 80%;
    height: 300px;
    border: 1px solid; 
    perspective: 200px;          /* prespective 和 perspective-origin 一般一起在外层元素上使用 */
    perspective-origin: 50% 5%;  /* **** */
}

.cube {
    width: 100px;
    height: 100px;
    margin: auto;
    margin-top: 100px;
    transform-style: preserve-3d;   /* 让多个子元素之间的 3D 关系像我们想象一样呈现 */
    transition: 1s ease;
    transform: rotateY(0deg);  /* 改变角度看 */
}
.face {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    border: none;
    line-height: 100px;
    font-family: sans-serif;
    font-size: 60px;
    color: white;
    text-align: center;
}

/* Define each face based on direction */
.front {
    background: rgba(0, 0, 0, 0.3);
    transform: translateZ(80px);
}
.back {
    background: rgba(0, 255, 0, 1);
    color: black;
    transform: rotateY(180deg) translateZ(80px);
}
.right {
    background: rgba(196, 0, 0, 0.7);
    transform: rotateY(90deg) translateZ(80px);
}
.left {
    background: rgba(0, 0, 196, 0.7);
    transform: rotateY(-90deg) translateZ(80px);
}
.top {
    background: rgba(196, 196, 0, 0.7);
    transform: rotateX(90deg) translateZ(80px);
}
.bottom {
    background: rgba(196, 0, 196, 0.7);
    transform: rotateX(-90deg) translateZ(80px);
}