正方体实现与循环旋转，如有不懂，欢迎提问，我是萌新，大神勿喷~

最新推荐文章于 2020-12-19 05:58:21 发布

weixin_30685029

最新推荐文章于 2020-12-19 05:58:21 发布

阅读量137

点赞数

原文链接：http://www.cnblogs.com/pengyaqi/p/9645553.html

版权

下面这张图片的X、Z、Y轴必须看懂，不然后续很难编写代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正方体实现与循环旋转</title>
        <style type="text/css">
            html {
                background: linear-gradient(#66FF99 0%,#00FFFF 80%); /* 背景色渐变 */
                opacity: .8; /* 设置透明度 */
                height: 100%;
            }
            .warp {
                margin-top: 200px;
            }
            .cure {
                width: 200px;
                height: 200px;
                position: relative; /*定位，使正方体六张图保持在一个水平面，父元素设置相对定位，设置定位必须设置宽高，不然为0*/
                margin: auto;
                transform-style: preserve-3d; /* 实现3d功能必用 */  
                animation: rotate 15s infinite; /*动画：动画名称(与下面@keyframes中名称一致) 动画执行时长 循环次数(这里设置无限)*/
            }
            @keyframes rotate{ /*启动动画*/
                from{
                    transform: rotateX(0deg) rotateY(0deg); /**/
                }
                to{
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            .cure>div {
                width: 100%;
                height: 100%;
                background: #333;
                opacity: .9;
                position: absolute; /*子元素依靠父元素设置绝对定位，同样必须设置宽高*/
                text-align: center;
                color: #fff;
                line-height: 200px;
                font-size: 50px;
            }
            
            /* 正方体实现 */
            .div1 {
                transform: translateZ(100px); /* 沿着Z轴向前100像素 */
            }
            .div2 {
                transform: translateZ(-100px); /* 沿着Z轴向后100像素 */
            }
            .div3 {
                transform: rotateY(90deg) translateZ(-100px); /* 沿着Y轴旋转90度(左侧面),在沿着Z轴向左平移100像素 */
            }
            .div4 {
                transform: rotateY(90deg) translateZ(100px); /* 沿着Y轴旋转90度(右侧面),在沿着Z轴向右平移100像素 */
            }
            .div5 {
                transform: rotateX(90deg) translateZ(100px); /* 沿着X轴旋转90度(顶层面),在沿着Z轴向上平移100像素 */
            }
            .div6 {
                transform: rotateX(90deg) translateZ(-100px); /* 沿着X轴旋转90度(底层面),在沿着Z轴向下平移100像素 */
            }
            
            /* 鼠标经过cure时向外扩张100px,属性值依据上面正方体实现执行与编写*/
            .cure:hover .div1 {
                transform: translateZ(200px);
            }
            .cure:hover .div2 {
                transform: translateZ(-200px);
            }
            .cure:hover .div3 {
                transform: rotateY(90deg) translateZ(-200px);
            }
            .cure:hover .div4 {
                transform: rotateY(90deg) translateZ(200px);
            }
            .cure:hover .div5 {
                transform: rotateX(90deg) translateZ(200px);
            }
            .cure:hover .div6 {
                transform: rotateX(90deg) translateZ(-200px);
            }
        </style>
    </head>
    <body>
        <div class="warp">
            <div class="cure">
                <div class="div1">Front</div>
                <div class="div2">Back</div>
                <div class="div3">Left</div>
                <div class="div4">Right</div>
                <div class="div5">Top</div>
                <div class="div6">Bottom</div>
            </div>
        </div>
    </body>
</html>

转载于:https://www.cnblogs.com/pengyaqi/p/9645553.html

weixin_30685029

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正方体实现与循环旋转，如有不懂，欢迎提问，我是萌新，大神勿喷~

下面这张图片的X、Z、Y轴必须看懂，不然后续很难编写代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>正方体实现与循环旋转</title> <style type="te...
复制链接

扫一扫