3D旋转立方体案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS 3D转换</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background-color: #F7F7F7;

        }

        .box {

            width: 100px;

            height: 100px;

            text-align: center;

            line-height: 100px;

            font-size: 24px;

            margin: 100px auto;

            position: relative;

            transform: rotateY(30deg) rotateX(-30deg);

            transform-style: preserve-3d;

            /*perspective:200px;*/

            animation: rotate 4s linear infinite;

        }

        .box div{

            width: 200px;

            height: 200px;

            position: absolute;

            left: 0;

            top: 0;

            opacity: 0.6;

        }

        .front{

            transform: translateZ(100px);

            background: pink;

        }

        .back{

            transform: translateZ(-100px) rotateY(180deg);

            background: green;

        }

        .left{

            transform: translateX(-100px) rotateY(-90deg);

            background: yellowgreen;

        }

        .right{

            transform: translateX(100px) rotateY(90deg);

            background: blueviolet;

        }

        .top{

            transform: translateY(-100px) rotateX(90deg);

            background: blue;

        }

        .bottom{

            transform: translateY(100px) rotateX(-90deg);

            background: red;

        }

        @keyframes rotate {

            from{

                transform: rotateY(30deg) rotateX(-30deg);

            }

            to{

                transform: rotateY(390deg) rotateX(-30deg);

            }

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="front">front</div>

        <div class="back">back</div>

        <div class="left">left</div>

        <div class="right">right</div>

        <div class="top">top</div>

        <div class="bottom">bottom</div>

    </div>

</body>

</html>
巴特西

3D旋转立方体案例

最新文章

热门文章
