立方體動畫

時間 2020-09-26

標籤立方體動畫简体版

原文原文鏈接

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        html{            perspective: 800px;        }        .box1{            transform-style: preserve-3d;            width: 200px;            height: 200px;            /**/            margin: 100px auto;            position: relative;            transition: all 10s ;            animation: roImg 4s linear infinite;        }        .box1>div{            position: absolute;            width: 200px;            height: 200px;            line-height:200px;            font-size: 100px;            text-align: center;            opacity: .5;            transition: all 2s;        }        /*.box1:hover {*/            /*transform: rotateY(90deg);*/        /*}*/        @keyframes roImg {            from{                transform: rotateX(0) rotateY(0);            }            to{                transform: rotateX(360deg) rotateY(360deg);            }        }        .box1>div:nth-child(1){            font-weight:bold;">yellow;            transform: rotateY(90deg) translateZ(100px);        }        .box1>div:nth-child(2){            font-weight:bold;">orange;            transform: rotateY(-90deg) translateZ(100px);        }        .box1>div:nth-child(3){            font-weight:bold;">red;            transform: rotateX(90deg) translateZ(100px);        }        .box1>div:nth-child(4){            font-weight:bold;">skyblue;            transform: rotateX(-90deg) translateZ(100px);        }        .box1>div:nth-child(5){            font-weight:bold;">yellowgreen;            transform: rotateX(0deg) translateZ(100px);        }        .box1>div:nth-child(6){            font-weight:bold;">chocolate;            transform: rotateX(180deg) translateZ(100px);        }    </style></head><body><div class="box1">    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>6</div></div></body></html>

相關標籤/搜索

每日一句

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