首页 > 作文

CSS3 3D酷炫立方体变换动画的实现

更新时间:2023-04-07 03:52:24 阅读: 评论:0

我爱撸码,撸码使我感好看的bl小说到快乐!

大家好,我是counter,本章微博主要利用了css3的一些新特性,

主要用到关键帧来使3d图形运动起来,涉及到了一些抽象的思想,立体的想象。

先给大家看看完成的效果,代码也不是很难,每行代码都给到了详细注释,纯css,没有用到js,css3不错。

效果如下:

每一行基本都有注释,就不重复说了,代码如下:

<!doctype html><html lang="zh"><head>    <meta chart="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <title>3d旋转</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设置保留3d效果,如果没有设置里面的元素将不会呈现3d效果 */            transform-style: prerve-3d;            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;        }        /* 立方体有六面,每个item1~6代表每一面,此时里面的item1~6具有三条轴,x,y,z */        /* x轴即是你电脑屏幕宽度的那条轴,从左到右。y轴即是你电脑屏幕高度的那条轴,从上到下。z轴即是你眼睛垂直看电脑屏幕的那条轴,方向从电脑屏幕到你的眼睛*/        /* 设置第一面 */        .item餐饮投资策划1 {              /* 沿z轴向你眼睛方向移动100px */            transform: translatez(100px);            /* 设置背景颜色,最后一个参数为透明度设置为0.6 */            background-color: rgba(255, 0, 0, 0.6);        }        /* 设置第二面 */        .item2 {            /* 沿z轴向里移动100px即为-100px */            transform: translatez(-100px);            background-color: rgba(72, 42, 245, 0.6);        }        /* 设置第三面 */        .item3 {            /* 沿x轴旋转90度,然后再向z轴移动100px(deg在这里表示度的意思) */            t世界第三大河ransform: rotatex(90deg) translatez(100px);            background-color: rgba(217, 230, 36, 0.6);        }        /* 设置第四面 */        .item4 {            /* 沿x轴旋转90度,然后再向z轴移动-100px */            transform: rotatex(90deg) translatez(-100px);            background-color: rgba(58, 7, 51, 0.6);        }        /* 设置第五面 */        .item5 {            /* 沿y轴旋转90度,然后再向z轴移动-100px */            transform: rotatey(90deg) translatez(-100px);            background-color: rgba(241, 142, 75, 0.6);        }        /* 设置第六面 */        .item6 {            /* 沿y轴旋转90度,然后向z轴移动100px */            transform: rotatey(90deg) translatez(100px);            background-color: rgba(125, 178, 238, 1937年7月7日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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.887551.com。

本文发布于:2023-04-07 03:52:23,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/032b6dc1c1e1ff9d5969ffd958822818.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:CSS3 3D酷炫立方体变换动画的实现.doc

本文 PDF 下载地址:CSS3 3D酷炫立方体变换动画的实现.pdf

下一篇:返回列表
标签:电脑屏幕   即是   那条   效果
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图