动画 自己 添加 logs ase box 代码 key
网上大都是正方体的效果,由于做一个东西需要,写了一个 html+CSS3 实现的长方体,有需要的也可以看看。 2017-07-25 21:30:23
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- html+css3实现长方体效果
- </title>
- <link rel="stylesheet" href="css/cuboid.css" />
- </head>
- <body>
- <div class="square-box">
- <div class="front">
- </div>
- <div class="bottom">
- </div>
- <div class="back">
- </div>
- <div class="top">
- </div>
- <div class="left">
- </div>
- <div class="right">
- </div>
- </div>
- </body>
- </html>
css 代码
- .square - box {
- width: 200px;
- height: 100px;
- box - sizing: border - box;
- position: relative;
- transform - style: preserve - 3d;
- /*设置动画 三者分别为:动画名 执行一次时间 执行方式*/
- animation: rotateanimation 5s ease;
- animation - iteration - count: infinite;
- /*令动画无限执行下去*/
- animation - timing -
- function: linear;
- /*匀速*/
- margin: 200px auto;
- }.square - box > div {
- position: absolute;
- }
- /*设置六面的视角*/
- .square - box > .front {
- width: 200px;
- height: 100px;
- transform: translateZ(50px);
- background: red;
- }.square - box > .bottom {
- width: 200px;
- height: 100px;
- transform: rotateX(270deg) translateZ(50px);
- background: deeppink;
- }.square - box > .back {
- width: 200px;
- height: 100px;
- transform: translateZ( - 50px);
- background: darkcyan;
- }.square - box > .top {
- width: 200px;
- height: 100px;
- transform: rotateX(90deg) translateZ(50px);
- background: yellow;
- }.square - box > .left {
- width: 100px;
- height: 100px;
- transform: rotateY(270deg) translateZ(50px);
- background: black;
- }.square - box > .right {
- width: 100px;
- height: 100px;
- transform: rotateY(90deg) translateZ(150px);
- background: #a7cbf0;
- }
- /*添加动画效果*/
- @keyframes rotateanimation {
- 0 % {
- transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
- }
- 100 % {
- transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
- }
- }
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
取值:
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。
查看效果
制作出长方体后你可以再加些自己想要的特效,div 中可插入图片什么的会更好看些。
html+css3 实现长方体效果
来源: http://www.bubuko.com/infodetail-2227964.html