前端学习日记：css3的3d变换制作旋转正方体(骰子)

末蓝、 2023-06-06 12:28 5阅读 0赞

/\* 让子盒子保持3d效果\*/

transform-style:preserve-3d;

/\*transform:rotateX(30deg) rotateY(-30deg);\*/

animation:gun 8s linear infinite;/\*infinite循环\*/  
        \}

.box>div\{  
            width: 100%;  
            height: 100%;  
            position: absolute;  
            text-align: center;  
            line-height: 250px;  
            font-size:60px;  
            color:\#daa520;  
            border-radius: 50%;  
        \}  
        /\*  
        重点：  
             转动之后的变换中心也会跟着转动，之后再在新的中心基础上去进行移动  
        \*/  
        .left\{  
            background-color: rgba(255,0,0,0.3);  
            /\* 变换中心\*/  
            transform-origin: left;  
            /\* 变换\*/  
            transform:rotateY(90deg) translateX(-125px);

.right\{  
            background:rgba(0,0,255,0.3);  
            transform-origin: right;  
            /\* 变换\*/  
            transform:rotateY(90deg) translateX(125px);  
        \}

.forward\{  
            background: rgba(255,255,0,0.3);  
            transform:translateZ(125px);  
        \}

.back\{  
            background: rgba(0,255,255,0.3);  
            transform:translateZ(-125px);  
        \}

.up\{  
            background: rgba(255,0,255,0.3);  
            transform:rotateX(90deg) translateZ(125px);  
        \}

.down\{  
            background: rgba(99,66,33,0.3);  
            transform:rotateX(-90deg) translateZ(125px);  
        \}

@keyframes gun \{  
            0%\{  
                transform:rotate3d(0,0,0,0);  
                /\*transform:rotateX(0deg) rotateY(0deg);\*/  
            \}  
              
            100%\{  
                transform:rotate3d(1,1,1,360deg);  
                /\*transform:rotateX(360deg) rotateY(360deg);\*/  
            \}  
        \}  
    </style>