html+css3实现长方体效果

网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看。                   2017-07-25         21:30:23

html代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>html+css3实现长方体效果</title>
 6     <link rel="stylesheet" href="css/cuboid.css" />
 7 </head>
 8 <body>
 9 <div class="square-box">
10     <div class="front"></div>
11     <div class="bottom"></div>
12     <div class="back"></div>
13     <div class="top"></div>
14     <div class="left"></div>
15     <div class="right"></div>
16 </div>
17 </body>
18 </html>

css代码

 1 .square-box{
 2     width: 200px;
 3     height: 100px;
 4     box-sizing: border-box;
 5     position: relative;
 6     transform-style: preserve-3d;
 7     /*设置动画 三者分别为:动画名 执行一次时间 执行方式*/
 8     animation: rotateanimation 5s ease;
 9     animation-iteration-count: infinite;/*令动画无限执行下去*/
10     animation-timing-function: linear;/*匀速*/
11     margin:200px auto;
12 }
13 .square-box>div{
14     position: absolute;
15 }
16 /*设置六面的视角*/
17 .square-box>.front{
18     width: 200px;
19     height: 100px;
20     transform: translateZ(50px);
21     background:red;
22 }
23 .square-box>.bottom{
24     width: 200px;
25     height: 100px;
26     transform: rotateX(270deg) translateZ(50px);
27     background:deeppink;
28 }
29 .square-box>.back{
30     width: 200px;
31     height: 100px;
32     transform: translateZ(-50px);
33     background:darkcyan;
34 }
35 .square-box>.top{
36     width: 200px;
37     height: 100px;
38     transform: rotateX(90deg) translateZ(50px);
39     background: yellow;
40 }
41 .square-box>.left{
42     width: 100px;
43     height: 100px;
44     transform: rotateY(270deg) translateZ(50px);
45     background: black;
46 }
47 .square-box>.right{
48     width: 100px;
49     height: 100px;
50     transform: rotateY(90deg) translateZ(150px);
51     background: #a7cbf0;
52 }
53 /*添加动画效果*/
54 @keyframes rotateanimation{
55     0%{
56         transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
57     }
58     100%{
59         transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
60     }
61 }

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

取值:

flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。

查看效果

制作出长方体后你可以再加些自己想要的特效,div中可插入图片什么的会更好看些。

时间: 07-25

html+css3实现长方体效果的相关文章

CSS3实现手风琴效果-------Day88

所谓的手风琴效果,就是像手风琴一样拉开关上,至于手风琴啥样,貌似那是我好久之前的回忆了. 不扯那些没用的,说说这个坑人的手风琴效果,先来看下效果图: 这个效果不错吧,也比较常用吧,可怜的我最开始的时候以为自己可以做到这个效果,就用display:none/block写了一排的div,你别说,还真出来那个感觉啦,哈哈,这里当然不会这么做,但是在我看明白之后,发现是一样简单到要吐血,这样的应用当初自己怎么就想不到. 实现过程中的第一个让我没想到,却感觉确实这样才对的地方: <div id="h

超慢速移动动画使用CSS3实现流畅效果

三角碎片以非常缓慢的速度旋转移动,如果使用JS实现会出现一像素一像素移动的卡顿 使用CSS3会获得非常理想的效果 transform: translate3d(80px, 150px, 0px) rotate(1220deg); transition: transform 30s linear 0s; 上面一个属性表示图像变换 translate3d(80px, 150px, 0px) 表示X轴偏移80px, Y轴偏移150px rotate(1220deg) 表示在此过程中旋转1220° tr

测试css3的动画效果在display:none的时候不耗费性能

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test TS Serializer</title> 6 <style> 7 .loadings { 8 width: 120px; 9 height: 120px; 10 /* background: #FFFFFF; */ 11 border-radius: 3

CSS3 3D立方体效果

CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立方体的效果实例来深入了解css3的transform属性,下面是这个实例的截图,加上动画还能旋转起来哟,是不是很酷炫?换上你喜欢的女生的照片,就可以大胆的撩妹了,哈哈! 想要查看demo,请点击这里,3D transform立方体效果 初识transform 顾名思义:变换.就可以想到它可以做很多很

css3 图片翻转效果

原文:css3 图片翻转效果 源代码下载地址:http://www.zuidaima.com/share/1571389560998912.htm 自己写的图片翻转的demo, 主要是css3的应用 里面就一个文件, 直接打开就可以了, 引用了在线的jquery, 图片也用data uri直接写在页面里了 版权声明:本文为博主原创文章,未经博主允许不得转载.

Image Wall - jQuery &amp; CSS3 图片墙效果

今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将关闭并重新打开一个更大的图像预览效果. 在线演示     下载源码 您可能感兴趣的相关文章 充满想象力的 JavaScript 物理和重力实验 精选9个值得学习的 HTML5 效果[附源码] 精选12个时尚的 CSS3 效果[附源码下载] 十分惊艳的8个 HTML5 & JavaScript 特效

CSS3 文本3D效果

代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: 200px; text-shadow: 0px -1px 0px #858585, 0px 1px 10px rgba(0, 0, 0, 0.6), 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba

CSS3 - CheakBox 开关效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

第八十节,CSS3边框图片效果

CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样,边框就可以自定义了.     1.border-image-source                      //引入背景图片地址     2.border-image-slice