前端小练习：案例3.旋转立方体

小姚学前端

已于 2023-08-06 17:40:59 修改

阅读量109

点赞数 4

分类专栏： css案例文章标签：前端

于 2023-07-25 23:03:20 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/131928135

版权

css案例专栏收录该内容

5 篇文章 2 订阅

订阅专栏

1.效果预览图

2.实现思路

3.代码实现

1.效果预览图

css实现正方体骰子

2.实现思路

定义一个大div盒子作为旋转对象，在大div盒子里放置6个小div盒子，利用定位和3d形变使6个小div盒子拼接成一个立方体。

3.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立方体</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        .wp {
            width:100vw;
            height:100vh;
            /* background:#000; */
            perspective: 2000px;
            transform-style: preserve-3d;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cont {
            width:140px;
            height:140px;
            position: relative;
            transform: rotateX(130deg) rotateY(145deg);
            transition: all 10s;
            perspective: 4000px;
            transform-style: preserve-3d;
        }
        .cont div {
            position: absolute;
            left:20px;
            top:20px;
            width:100px;
            height:100px;
            text-align: center;
            line-height:100px;
            font-size:80px;
            color: #fff;
        }
        .cont div:nth-child(1) {
            background:rgba(3, 183, 3,0.5);
            transform: rotateX(90deg) translateZ(50px);
        }
        .cont div:nth-child(2) {
            background:rgba(3, 126, 183, 0.5);
            transform: rotateY(-90deg) translateZ(50px);
        }
        .cont div:nth-child(3) {
            background:rgba(3, 45, 183, 0.5);
            transform: rotateY(180deg) translateZ(50px);
        }
        .cont div:nth-child(4) {
            background:rgba(183, 3, 177, 0.5);
            transform:translateZ(50px);
        }
        .cont div:nth-child(5) {
            background:rgba(183, 3, 3, 0.5);
            transform: rotateY(90deg) translateZ(50px);
        }
        .cont div:nth-child(6) {
            background:rgba(177, 183, 3, 0.5);
            transform: rotateX(-90deg) translateZ(50px);
        }
        .wp:hover .cont {
            transform: rotateX(1500deg) rotateY(2000deg);
        }
        .wp:hover .cont div:nth-child(1) {
            transform: rotateX(90deg) translateZ(70px);
        }
        .wp:hover .cont div:nth-child(2) {
            transform: rotateY(-90deg) translateZ(70px);
        }
        .wp:hover .cont div:nth-child(3) {
            transform: rotateY(180deg) translateZ(70px);
        }
        .wp:hover .cont div:nth-child(4) {
            transform:translateZ(70px);
        }
        .wp:hover .cont div:nth-child(5) {
            transform: rotateY(90deg) translateZ(70px);
        }
        .wp:hover .cont div:nth-child(6) {
            transform: rotateX(-90deg) translateZ(70px);
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="cont">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>
</html>