CSS3 三d炫酷立方体转换动漫的完成

日期:2021-03-01 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

我爱撸码,撸码使我觉得开心!

大伙儿好,我是Counter,本章新浪微博关键运用了CSS3的1些新特点,

关键用到重要帧来使三d图型健身运动起来,涉及到到了1些抽象性的观念,立体式的想像。

先给大伙儿看看进行的实际效果,编码也并不是很难,每行编码都给到了详尽注解,纯CSS,沒有用到JS,CSS3非常好。

实际效果以下:

每行基础都有注解,就不反复说了,编码以下:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三d转动</title>
    <style>
        /* 给最外层父级设定景深,让里边的元素有立体式的室内空间,而且设定宽高 */
        .wrapper {
            /* 景深600像素 */
            perspective: 500px;
            /* 设定margin间距上面100px,上下自融入,下面0 */
            margin: 100px auto 0;
            width: 200px;
            height: 200px;
            /* border: 1px solid black; */
        }
        
        .box {
            /* 设定相对性精准定位好让子元素相对自身精准定位 */
            position: relative;
            /* 给item设定保存三d实际效果,假如沒有设定里边的元素将不容易展现三d实际效果 */
            transform-style: preserve⑶d;
            width: 200px;
            height: 200px;
            /* move为设定的重要帧,健身运动8秒,匀速健身运动,无尽次(各个主要参数意味着的含意) */
            animation: move 8s linear infinite;
        }

        /* 挑选全部开始带有item的元素,使其所有精准定位到父级所属的部位 */
        div[class^="item"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            /* 使文字上下对齐 */
            text-align: center;
            /* 使文字左右对齐 */
            line-height: 200px;
        }

        /* 立方体有6面,每一个item1~6意味着每面,此时里边的item1~6具备3条轴,x,y,z */
        /* x轴就是你电脑上显示屏宽度的那条轴,从左到右。y轴就是你电脑上显示屏高宽比的那条轴,从上到下。z轴就是你双眼竖直看电脑上显示屏的那条轴,方位从电脑上显示屏到你的双眼*/
        /* 设定第1面 */
        .item1 {  
            /* 沿z轴向你双眼方位挪动100px */
            transform: translateZ(100px);
            /* 设定情况色调,最终1个主要参数为全透明度设定为0.6 */
            background-color: rgba(255, 0, 0, 0.6);
        }
        /* 设定第2面 */
        .item2 {
            /* 沿z轴向里挪动100px即为⑴00px */
            transform: translateZ(⑴00px);
            background-color: rgba(72, 42, 245, 0.6);
        }
        /* 设定第3面 */
        .item3 {
            /* 沿x轴转动90度,随后再向z轴挪动100px(deg在这里表明度的意思) */
            transform: rotateX(90deg) translateZ(100px);
            background-color: rgba(217, 230, 36, 0.6);
        }
        /* 设定第4面 */
        .item4 {
            /* 沿x轴转动90度,随后再向z轴挪动⑴00px */
            transform: rotateX(90deg) translateZ(⑴00px);
            background-color: rgba(58, 7, 51, 0.6);
        }
        /* 设定第5面 */
        .item5 {
            /* 沿y轴转动90度,随后再向z轴挪动⑴00px */
            transform: rotateY(90deg) translateZ(⑴00px);
            background-color: rgba(241, 142, 75, 0.6);
        }
        /* 设定第6面 */
        .item6 {
            /* 沿y轴转动90度,随后向z轴挪动100px */
            transform: rotateY(90deg) translateZ(100px);
            background-color: rgba(125, 178, 238, 0.6);
        }

        /* 设定重要帧让box器皿转动起来,各自沿x,y,z轴从0转动360度 */
        @keyframes move {
            0% {
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <div class="item1">1</div>
            <div class="item2">2</div>
            <div class="item3">3</div>
            <div class="item4">4</div>
            <div class="item5">5</div>
            <div class="item6">6</div>
        </div>
    </div>
</body>
</html>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:几种普遍的CSS合理布局(小结) 返回下一篇:没有了