3D立方體

時間 2019-11-15

標籤 3d 立方體简体版

原文原文鏈接

效果圖css

主要用到的3D屬性html

一、保留子元素的3d屬性：transform-style:preserve-3d;spa

二、2D變形屬性：3d

　　①transform:translate()平移，分X軸，Y軸，Z軸3個方向；單位是像素code

　　②transform:rotate()旋轉，分X軸，Y軸，Z軸3個方向；單位是deg角度orm

　　③transform:scale()縮放，0~1表示縮小倍數，1~正無窮表示放大倍數（本案例沒有用到）htm

　　④transform:skew()斜切，兩個參數：水平斜切，垂直斜切；單位deg角度（本案例沒有用到）blog

　　注意：同一個元素多個變形屬性用空格隔開，不能寫多個transform；ci

3D立方體：animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(10deg) rotateY(30deg);
            animation: move 2s ease 0s infinite;
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            opacity: .5;
        }
        .front {
            width: 300px;
            height: 300px;
            background-color: red;
            transform:translateZ(150px);
        }
        .back {
            width: 300px;
            height: 300px;
            background-color: blue;
            transform: translateZ(-150px);
        }
        .left {
            width: 300px;
            height: 300px;
            background-color: orange;
            transform: rotateY(90deg) translateZ(-150px);
        }
         .right {
            width: 300px;
            height: 300px;
            background-color: green;
            transform: rotateY(90deg) translateZ(150px);
        } 
        .top {
            width: 300px;
            height: 300px;
            background-color: lightblue;
            transform: rotateX(90deg) translateZ(150px);
        }
        .bottom {
            width: 300px;
            height: 300px;
            background-color: purple;
            transform: rotateX(90deg) translateZ(-150px);
        }
        @keyframes move {
            from{
                transform: rotateX(10deg) rotateY(30deg);
            }
            to{
                transform: rotateX(370deg) rotateY(390deg);
            }
        }
     </style>
</head>
<body>
    <div class="box">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。