c3旋转正方体

最新推荐文章于 2021-12-23 13:02:10 发布

super01233

最新推荐文章于 2021-12-23 13:02:10 发布

阅读量386

点赞数

文章标签： c3 表白旋转正方体

本文链接：https://blog.csdn.net/super01233/article/details/103285626

版权

h5+ css 编写炫酷的旋转正方体效果（表白神器）*

直接上代码
主要运用c3里面的3d效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;}
    section{
        width: 400px;
        height: 400px;
        margin: 200px auto;
        position: fixed;
        top: 0;right: 0;
        bottom: 0;left: 0;
        transform: rotateX(30deg)  rotateY(30deg);
        transform-style: preserve-3d;
        /* perspective: 1500px; */
        animation: section 10s infinite  linear;
    }
    @keyframes section {
        0%{
            transform: rotateY(0deg) translateZ(0);
        }
        16%{
            transform: rotateY(60deg) rotateZ(60deg);
        }
        32%{
            transform: rotateY(120deg) rotateZ(120deg);
        }
        48%{
            transform: rotateY(180deg) rotateZ(180deg);
        }
        64%{
            transform: rotateY(240deg) rotateZ(240deg);
        }
        80%{
            transform: rotateY(300deg) rotateZ(300deg);
        }
        100%{
            transform: rotateY(360deg) rotateZ(360deg);
        }
            /* from{
                transform: rotateX(0deg)  rotateY(0deg);
            }
            to{
                transform: rotateX(360deg)  rotateY(360deg);
            }
             */
        }
       
    div{
        width: 400px;
        height: 400px;
        position:fixed;
        top: 0;
        left: 0;
        font-size: 100px;
        text-align: center;
        line-height: 400px;
        opacity: 0.9;
    }
    section div img {
        width: 100%;
        height: 100%;
    }
    div:nth-child(1){
        background: red;
        transform: translateX(200px) rotateY(-90deg);
    }
    div:nth-child(2){
        background: yellow;
        transform: translateX(-200px) rotateY(90deg);
    }
    div:nth-child(3){
        background: green;
        transform: translateY(-200px) rotateX(90deg);
    }
    div:nth-child(4){
        background: purple;
        transform: translateY(200px) rotateX(-90deg);
    }
    div:nth-child(5){
        background: blue;
        transform: translateZ(200px);
    }
    div:nth-child(6){
        background: #ccc;
        transform: translateZ(-200px);
    }
    </style>

</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

super01233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
c3旋转正方体

h5+ css 编写炫酷的旋转正方体效果（表白神器）*直接上代码主要运用c3里面的3d效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...
复制链接

扫一扫