网上大都是正方体的效果，由于做一个东西需要，写了一个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实现长方体效果的更多相关文章

  1. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  2. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  4. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  5. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

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

    也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...

  7. css3写下雨效果

    css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...

  8. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  9. CSS3 速移动效果动画流畅无卡顿

    js或jquery 元素移动以像素计算,手机上移动效果会有卡顿 利用CSS3 可以很简单的实现流畅的移动动画 transform: translate3d(66px, 88px, 0px) rotat ...

随机推荐

  1. Vulkan Tutorial 24 Descriptor pool and sets

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 描述符布局描述了前一章节讨论过的可以绑定的描述符的类型.在 ...

  2. 邪恶改装2：用单片机实现一次简单的wifi密码欺骗

    0×00 前言 前段时间用TPYBoard v202 做了一个简单的WIFI干扰攻击器(ps :没有看过的小伙伴,可以看一下:http://www.freebuf.com/column/136985. ...

  3. VS2015 +Qt5 串口工具

    简单的小工具是VS2015 + Qt5.6.1实现的,界面部分是Qt实现,串口是封装的WinAPI,把串口收发模块封装成了个Serialport.dll 供Qt界面调用. 由于VS2015需要CRT运 ...

  4. VB6之GDI+加载PNG图片

    原生的VB6不支持PNG个图片,因为刚有VB的时候还没有PNG的概念呢.不过,利用GDI+加载解析个PNG简直是砍瓜切菜般简单. GDI+的模块是我在网上下载的,地址应该是:http://vistas ...

  5. php七牛批量删除空间内的所有文件方法

    相信大家都在使用七牛的免费云存储服务的同时,有清空七牛云存储镜像文件或者批量删除七牛云空间文件的需求,该怎么做?官方的工具好像并没有提供批量删除的功能,七牛云官方给出的建议是删除空间,再新建一个这样太 ...

  6. var与let的区别

    var与let的区别 前言: 在没接触Es6之前,我们在js中声明都是通过var来声明变量的,var声明变量虽说方便,但是,又有一些自己的诟病,下边来说一说,这三个的区别! var var相信大家都不 ...

  7. 给xcode项目修改名字

    在xcode项目开发中,经常会遇到需要修改项目名字的问题, 但是xcode本身修改项目名字比较麻烦,有时候修改的不完全,有时候修改了项目无法打开,无奈只能建一个新项目.这里提供一种修改xcode项目名 ...

  8. C# 中的 ConfigurationManager类引用方法应用程序配置文件App.config的写法

    c#添加了Configuration;后,竟然找不到 ConfigurationManager 这个类,后来才发现:虽然引用了using System.Configuration;这个包,但是还是不行 ...

  9. 字符串(String)

    字符串 字符串就是用引号引起来的一段文字.字母.数字-- 例如: "这是字符串"."zheshizifuc"."6666" 使用字符串的方法 ...

  10. android6.0动态权限处理<一>

    android 6.0以上为了保护用户的隐私,和以往被人诟病的权限机制,确立了新的权限机制.从 Android 6.0(API 级别 23)开始,用户开始在应用运行时向其授予权限,而不是在应用安装时授 ...