H5-立方体的制作

最新推荐文章于 2021-06-19 17:02:15 发布

浮云骑士-锋

最新推荐文章于 2021-06-19 17:02:15 发布

阅读量566

点赞数 1

本文链接：https://blog.youkuaiyun.com/xxf15162161455/article/details/79761078

版权

本文介绍了如何使用HTML5技术创建一个动态展示的立方体效果，详细解析了立方体的旋转、变换等关键步骤，适合前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态立方体

    <title></title>
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: black;
        }
        body{
            perspective: 200px;
        }
        .stage,.stage>img{
            width: 400px;
            height: 400px;
            position: absolute;
        }
        .stage>img{
            opacity: 0.5;
            box-shadow: 1px 1px 10px green;
        }
        .stage{
            transform-style: preserve-3d;
            transition: 10s;
        /*让stage的子级呈现3D效果*/
        left:calc(50% - 200px);
        top: calc(50% - 200px);     
        transform: rotateX(-10deg) rotateY(10deg);      
        }
        .stage>img:nth-child(1){
            transform: translateZ(200px);
        }
        .stage>img:nth-child(2){
            transform:rotateY(180deg) translateZ(200px);
        }
        .stage>img:nth-child(3){
            transform:rotateX(90deg) translateZ(200px);
        }
        .stage>img:nth-child(4){
            transform:rotateX(-90deg) translateZ(200px);
        }
        .stage>img:nth-child(5){
            transform:rotateY(90deg) translateZ(200px);
        }

        .stage>img:nth-child(3){
            transform:rotateY(-90deg) translateZ(200px);
        }
        .stage:hover{
            /*transform: rotateX(-10deg) rotateY(370deg);只有Y轴*/
            transform: rotateX(350deg) rotateY(370deg);
        }
    </style>
</head>
<body>
    <div class="stage">
        <img src="img/001.jpg"/>
        <img src="img/002.jpg"/>
        <img src="img/003.jpg"/>
        <img src="img/004.jpg"/>
        <img src="img/005.jpg"/>
        <img src="img/006.jpg"/>