网上大都是正方体的效果，由于做一个东西需要，写了一个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. root权限下找不到 /root/.ssh目录

    Xshell配置ssh登陆远程服务器,找不到 root/.ssh目录,报错信息如下: root@ubuntu:/home/xinxin# cd /root/.ssh/bash: cd: /root/. ...

  2. Swift计算字符数量

    通过调用全局 countElements 函数并将字符串作为参数进行传递可以获取该字符串的字符数量. let unusualMenagerie = "Koala

  3. 执行3小时超长SQL的分析优化过程：从索引遇见IS NULL，到最佳实践

    月底高峰期,对一个典型项目抽查分析时,发现了一个超级慢.全表扫描的SQL,语句很简单,AWR中赫然在列,在我统计的截止时间内还没有结束... 使用v$active_session_history进一步 ...

  4. 【笔记】记一次.net语法await和async的异步编程实验与笔记。

    1.实践代码全记录: using System; using System.Collections.Generic; using System.Diagnostics; using System.Li ...

  5. gulp 入门指南

    gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率. 在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都 ...

  6. wget下载站点文件

    非常简单的指令,只需要: wget -c -r -p -k -np [URL] 下面解释下个参数的意义: -c 断点续传 -r 递归下载,可遍历整个站点的结构 -p 网页显示所需要的素材(图片\css ...

  7. 基于Json序列化和反序列化通用的封装

    1. 最近项目已经上线了 ,闲暇了几天 想将JSON的序列化以及反序列化进行重新的封装一下本人定义为JSONHelp,虽然Microsoft 已经做的很好了.但是我想封装一套为自己开发的项目使用.方便 ...

  8. 【JS小技巧】JavaScript 函数用作对象的隐藏问题

    用户反馈 @消失的键盘 在论坛反馈了一个问题,在 AppBoxMvc 中的 Title 模型中,如果将 Name 属性改名为小写的 name 属性,就会报错: 因为这是一个 ASP.NET MVC 的 ...

  9. django Modelform

    前言: 为什么要用form去验证呢? 我们提交的是form表单,在看前端源码时如果检查到POST URL及我们提交的字段,如果没有验证我们是否可以直接POST数据到URL,后台并没有进行校验,直接处理 ...

  10. Html的基本元素(Element)

    本人写这篇文章是我在IT修真园里学习了一段时间,反过来复习时整理的.虽然只是些基础知识内容,希望能帮到大家. 首先我们要了解所谓的html它的定义是什么? [html:超文本标记语言,文本:txt格式 ...