立方体的旋转特效

目标:
设置动画animotion实现立方体的旋转特效

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立方体旋转特效title>
    <style>
        @keyframes rotate{
            from{
                transform: rotate3d(0,0,0,0);
            }

            to{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .main{
            margin: 200px auto;
            position: relative;
            width: 400px;
            height: 400px;
            transform-style: preserve-3d;
            animation: rotate 10s infinite linear;
        }

        .main>div{
            position: absolute;
            top: 0;
            left: 0;
            width: 400px;
            height: 400px;
            opacity: 0.8;
            background-size: 100% 100%;
        }

        /* 前 */
        .one{
            transform: translateZ(200px);
            background-image: url(./images/jd1.jpg);
        }

        /* 后 */
        .two{
            transform: translateZ(-200px) rotateX(180deg);
            background-image: url(./images/jd2.jpg);
        }

        /* 左 */
        .three{
            transform: translateX(-200px) rotateY(270deg);
            background-image: url(./images/jd3.jpg);
        }

        /* 右 */
        .four{
            transform: translateX(200px) rotateY(90deg);
            background-image: url(./images/jd4.jpg);
        }

        /* 上 */
        .five{
            transform: translateY(-200px) rotateX(90deg);
            background-image: url(./images/jd5.jpg);
        }

        /* 下 */
        .six{
            transform: translateY(200px) rotateX(270deg);
            background-image: url(./images/jd6.jpg);
        }
    style>
head>
<body>
    <div class="main">
        <div class="one">div>
        <div class="two">div>
        <div class="three">div>
        <div class="four">div>
        <div class="five">div>
        <div class="six">div>
    div>
body>
html>

效果展示:

立方体旋转特效

你可能感兴趣的:(Html,css,css3,html)