透视立方体

最新推荐文章于 2022-05-13 23:30:01 发布

Ellie.

最新推荐文章于 2022-05-13 23:30:01 发布

阅读量390

点赞数

分类专栏： Learning

本文链接：https://blog.csdn.net/BlackMambaguo/article/details/108689092

版权

Learning 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

透视立方体

设置透视立方体需要用到的属性：
定位：把立方体的六个面定位在同一个位置。
opacity：设置透明度
transform的translate：移动
transform的rotate：旋转
transform-style：设置了透视点后用该属性保留3d效果
transform: rotate3d，设置旋转轴
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 在body里设置透视点 */
        body {
            perspective: 1000px;
        }

        .big {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            /* 因为page的div类块和body隔了一层lifang类块，因此需要设置该属性保留3d效果 */
            transform-style: preserve-3d;
            transform: rotate3d(1, 1, 1, 0deg);
            transition: all 5s;
        }

        .big:hover {
            transform:rotate3d(1, 1, 1, 720deg);
        }

        .page {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.6;
        }

        .front {
            /* //和/都可以 */
            background-image: url(../Picture/可爱女孩.jpg);
            background-size: 100% auto;
            transform: translateZ(100px);
        }

        .back {
            background-image: url(../Picture/美团照片.jpg);
            background-size: 100% auto;
            transform: translateZ(-100px);
        }

        .right {
            background-image: url(../Picture/字节照片.jpg);
            background-size: 100% auto;
            transform: rotateY(90deg) translateZ(100px);
        }

        .left {
            background-image: url(../Picture/猿辅导.jpg);
            background-size: 100% auto;
            transform: rotateY(-90deg) translateZ(100px);
        }

        .top {
            background-image: url(../Picture/腾讯.jpg);
            background-size: 100% auto;
            transform: rotateX(90deg) translateZ(100px);
        }

        .bottom {
            background-image: url(../Picture/阿里巴巴照片.jpg);
            background-size: 100% auto;
            transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="page front"></div>
        <div class="page back"></div>
        <div class="page left"></div>
        <div class="page right"></div>
        <div class="page top"></div>
        <div class="page bottom"></div>
    </div>
</body>

</html>