使用css3制作3D立方体

最新推荐文章于 2022-07-24 23:16:35 发布

转业不

最新推荐文章于 2022-07-24 23:16:35 发布

阅读量257

点赞数

分类专栏： css 文章标签： css3 css animation 定位前端

本文链接：https://blog.csdn.net/weixin_52327887/article/details/110825628

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

3D立方体

3d立方比较好理解，就是将各个面堆叠之后再移动或旋转
至于怎么将六个面堆叠在一起，小编使用的是绝对定位（position:absolute）将所有的面定位在同一个位置，之后的操作不外乎就是移动（transform:translate()）和旋转(transform:rotate())了
*注意旋转时设置好基线（transform-origin）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #main{
        width:100px;
        height: 100px;
        margin:100px auto;
    }
    #box{
        position: relative;
        transform-style: preserve-3d;
        transform-origin:50px 50px 50px;
        animation:my 3s linear infinite;
    }
    @keyframes my{
        0% {transform:rotateX(45deg) rotateY(0deg)}
        100%{transform:rotateX(45deg) rotateY(360deg)}
    }
    #box1,#box2,#box3,#box4,#box5,#box6{
        width:100px;
        height:100px;
        background-color: red;
        position: absolute;
        border:1px solid black;
        opacity: 0.4;
    }
    #box1{
        background:yellow;
        border:1px solid black;
        transform-origin: left ;
        transform: rotateY(-90deg);

    }
    #box2{
        background:blue;
        border:1px solid black;
        transform-origin: right ;
        transform: rotateY(90deg);

    }
    #box3{
        background:green;
        border:1px solid black;
        transform-origin: bottom ;
        transform: rotateX(-90deg);

    }
    #box4{
        background:orange;
        border:1px solid black;
        transform-origin: top ;
        transform: rotateX(90deg);

    }
    #box5{
        background:pink;
        border:1px solid black;
        transform: translateZ(100px)

    }
</style>
<body>
    <div id="main">
        <div id="box">
            <div id="box1"></div>
            <div id="box2"></div>
            <div id="box3"></div>
            <div id="box4"></div>
            <div id="box5"></div>
            <div id="box6"></div>
        </div>
    </div>
</body>
</html>

效果图

在这里插入图片描述

转业不

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用css3制作3D立方体

3D立方体3d立方比较好理解，就是将各个面堆叠之后再移动或旋转至于怎么将六个面堆叠在一起，小编使用的是绝对定位（position:absolute）将所有的面定位在同一个位置，之后的操作不外乎就是移动（transform:translate()）和旋转(transform:rotate())了*注意旋转时设置好基线（transform-origin）<!DOCTYPE html><html lang="en"><head> <meta chars
复制链接

扫一扫