css3 实现正方体3D旋转

最新推荐文章于 2023-05-22 13:53:34 发布

water_Popcorn

最新推荐文章于 2023-05-22 13:53:34 发布

阅读量702

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/water_Popcorn/article/details/78662580

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .all{
            margin-left: 200px;
            width: 300px;
            height: 300px;
            perspective: 500px;
            border: 1px solid green;
            transform: rotate(30deg);
            transform-style: preserve-3d;
            transition: 6s;
        }
        .t1{

            width: 0px;

            height: 0px;
            margin-left: 100px;
            border: 50px solid red;
            transform: rotateX(90deg);
            transform-origin: bottom;

        }
        .t2{

            width: 0px;
            height: 0px;
            float: left;
            border:50px solid  aquamarine;
            transform: rotateY(-90deg);
            transform-origin: right;

        }

        .t3{

            width: 0px;
            height: 0px;
            float: left;
            margin-left: 100px;
            border:50px solid blue ;
            transform: rotateY(90deg);
            transform-origin:left;

        }
        .t4{

            width: 0px;
            height: 0px;
            margin-left: 100px;
            margin-top: 100px;
            border: 50px solid orange;
            transform: rotateX(-90deg);
            transform-origin: top;

        }
        .t5{

            width: 0px;
            height: 0px;
            margin-left: 100px;
            margin-top: -200px;
            border: 50px solid pink;
            transform: rotateX(0deg);
            transform-origin: bottom;

        }
        .all:hover{
            transform: rotateX(360deg)rotateY(540deg)rotateZ(290deg)scale(1.2);
        }

    </style>
</head>
<body>
<div class="all">

    <div class="t1"></div>
    <div class="t2"></div>
    <div class="t3"></div>
    <div class="t4"></div>
    <div class="t5"></div>


</div>
</body>
</html>

water_Popcorn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 实现正方体3D旋转

源代码如下：html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> .all{ margin-left: 200px; width: 300px; height: 300px;
复制链接

扫一扫