前端开发纯CSS3的3d动画实例

前端全栈开发人才就业|前端开发就业形势|web前端开发界面实例
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&quot; xml:lang=”en”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
    <title>vscode前端开发实例:3d动画实例</title>
    <style type=”text/css”>
        * {
            margin: 0px;
            padding: 0px
        }
        .wrapout {
            height: 1000px;
            width: 1560px;
            background-color: #bbb;
            margin: 100px 0px;
            border: 1px solid #fff;
        }
        .wrap {
            width: 500px;
            height: 70%;
            background-color: white;
            margin: 150px 10px;
            position: relative;
            float: left;
            -webkit-transform-style: preserve-3d;
            /显示方式为3d样式/ -webkit-perspective: 1500;
            /设置三维透视的距离 /
        }
        .cube,
        .cube1 {
            width: 200px;
            height: 300px;
            top: 200px;
            left: 150px;
            -webkit-transform-style: preserve-3d;
            /* /规定如何在 3D 空间中呈现被嵌套的元素/ */
            position: absolute;
            -webkit-transform: rotateX(30deg) rotateY(30deg);
            /* 旋转角度 */
        }
        .poster {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 100px;
            left: 50px;
            border-radius: 10px
        }
        .poster1 {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50px;
            left: 0px;
            border-radius: 10px
        }
        .cube {
            -webkit-animation-name: ringXY;
            /执行动画名称/ -webkit-animation-duration: 3s;
            /动画执行时间/ -webkit-animation-iteration-count: infinite;
            /执行次数,这里为无数次/ -webkit-animation-timing-function: linear;
            /执行方法为线性/
        }
        .cube1 {
            -webkit-animation-name: ringYX;
            -webkit-animation-duration: 3s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }
        @-webkit-keyframes ringX {
            /动画自定义/ 0% {
                -webkit-transform: rotateX(0deg);
            }
            50% {
                -webkit-transform: rotateX(180deg);
            }
            100% {
                -webkit-transform: rotateX(360deg);
            }
        }
        @-webkit-keyframes ringY {
            0% {
                -webkit-transform: rotateY(0deg);
            }
            50% {
                -webkit-transform: rotateY(180deg);
            }
            100% {
                -webkit-transform: rotateY(360deg);
            }
        }
        @-webkit-keyframes ringYX {
            0% {
                -webkit-transform: rotateY(0deg) rotateX(0deg);
            }
            40% {
                -webkit-transform: rotateY(180deg) rotateX(200deg);
            }
            100% {
                -webkit-transform: rotateY(360deg) rotateX(360deg);
            }
        }
        @-webkit-keyframes ringXY {
            0% {
                -webkit-transform: rotateY(0deg) rotateX(0deg);
            }
            50% {
                -webkit-transform: rotateY(180deg) rotateX(180deg);
            }
            100% {
                -webkit-transform: rotateY(360deg) rotateX(360deg);
            }
        }
    </style>
</head>
<body>
    <div class=”wrapout”>
        <div class=”wrap”>
            <div class=”cube”>
                <div class=”poster” style=”-webkit-transform:rotateX(0deg) translateZ(50px);background-color: rgba(10, 9, 9, 0.21)”></div>
                <div class=”poster” style=”-webkit-transform:rotateX(90deg) translateZ(50px) ;background-color:rgba(247, 0, 0, 0.41)”></div>
                <div class=”poster” style=”-webkit-transform:rotateX(180deg) translateZ(50px); background-color: rgba(222, 0, 247, 0.38)”></div>
                <div class=”poster” style=”-webkit-transform:rotateX(270deg) translateZ(50px); background-color: rgba(0, 144, 247, 0.38)”></div>
                <div class=”poster” style=”-webkit-transform:rotateY(90deg) translateZ(50px) ;background-color: rgba(0, 247, 125, 0.38)”></div>
                <div class=”poster” style=”-webkit-transform:rotateY(270deg) translateZ(50px) ;background-color: rgba(247, 244, 0, 0.42)”></div>
            </div>
            <div class=”cube1″>
                <div class=”poster1″ style=”-webkit-transform:rotateX(0deg) translateZ(100px) ;background-color: rgba(10, 9, 9, 0.21)”></div>
                <div class=”poster1″ style=”-webkit-transform:rotateX(90deg) translateZ(100px) ;background-color:rgba(247, 0, 0, 0.41)”></div>
                <div class=”poster1″ style=”-webkit-transform:rotateX(180deg) translateZ(100px); background-color: rgba(222, 0, 247, 0.38)”></div>
                <div class=”poster1″ style=”-webkit-transform:rotateX(270deg) translateZ(100px); background-color: rgba(0, 144, 247, 0.38)”></div>
                <div class=”poster1″ style=”-webkit-transform:rotateY(90deg) translateZ(100px) ;background-color: rgba(0, 247, 125, 0.38)”></div>
                <div class=”poster1″ style=”-webkit-transform:rotateY(270deg) translateZ(100px) ;background-color: rgba(247, 244, 0, 0.42)”>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
前端css开发实例|深圳前端开发工作难找|前端 如何团队开发?
» 本文来自:前端开发者 » 《前端开发纯CSS3的3d动画实例》
» 本文链接地址:https://www.rokub.com/4155.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!