网上大都是正方体的效果,由于做一个东西需要,写了一个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. linux上搭建zookeeper

    1.zookeeper介绍 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提 ...

  2. Swift自增和自增运算

    自增和自增运算 和 C 语言一样,Swift 也提供了方便对变量本身加1或减1的自增(++)和自减(--)的运算符.其操作对象可以是整形和浮点型. ‌ var i = ++i // 现在 i = 1 ...

  3. 【Android Developers Training】 103. 查询当前地点

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  4. 【Android Developers Training】 81. 解析XML数据

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  5. 2017寒假零基础学习Python系列之函数之 定义默认参数

    在定义函数时,可以有默认参数例如Python自带的函数int(),其实就是两个参数,我们既可以传一个参数,又可以传两个参数 int(') >>>123 int(',8) 83 int ...

  6. 利用libcurl进行post

    逛百度知道看到有个人提问:http://zhidao.baidu.com/question/1447092283140740700 C写HTTP应用只有疯子才会老老实实的SOCKET编程吧?我后来还是 ...

  7. window.onload 和 $(document).ready()

    一. window.onload 1. 必须等到页面上所有元素(包括图片, JS文件,CSS文件等外部资源)加载完成后才执行 2. window.onload绑定多个函数时,只会执行最后一个 < ...

  8. Execution failed for task':app;clean'

    Execution failed for task':app;clean' >Unable to delete directory:f:xxxxxbuild\output\apk当程序出先这个错 ...

  9. 简单的线性回归问题-TensorFlow+MATLAB·

    首先我们要试验的是 人体脂肪fat和年龄age以及体重weight之间的关系,我们的目标就是得到一个最优化的平面来表示三者之间的关系: TensorFlow的程序如下: import tensorfl ...

  10. mysql主从数据库设置备忘

    [mysqld] binlog-do-db = databasename1 binlog-do-db = databasename2 binlog-do-db = databasename3 -- 且 ...