CSS3 Tranform 3D 的应用

最新推荐文章于 2022-03-01 15:44:48 发布

dingshige8508

最新推荐文章于 2022-03-01 15:44:48 发布

阅读量168

点赞数

原文链接：http://www.cnblogs.com/CccZss/p/8511469.html

版权

CSS3 Tranform 3D 的应用

一、perspective 属性

1. 作用：

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

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

2. 作用范围

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

perspective: 200px

Ft5yZCEPZwzE9r-ktqGcsDveTq49

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

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

FoOtAKRPrASDQtZZs9Ogo_JvizBT

二、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

六、例子

FtZGZIL5lNFr1YQQ4qxYkm3a9jSE

<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);
}

上面如果把 div class="cube" 的元素旋转 rotateY(30deg) 其效果如下：

但是如果把 prespective 从 cube 的父元素移到 cube 上，其旋转效果如下：

参考：

好吧，CSS3 3D transform变换，不过如此！

注意

转载、引用，但请标明作者和原文地址

转载于:https://www.cnblogs.com/CccZss/p/8511469.html

dingshige8508

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 Tranform 3D 的应用

CSS3 Tranform 3D 的应用一、perspective 属性1. 作用：设置元素被查看位置的视图，类似于眼睛到屏幕的距离，一般跟 perspective-origin 共同作用在一个父元素上属性值 = 屏幕分辩率 * 屏幕和我们眼睛的距离当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身perspective 属性只影响 3D ...
复制链接

扫一扫