html+css3实现长方体效果
网上大都是正方体的效果，由于做一个东西需要，写了一个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实现长方体效果的更多相关文章
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3幻灯片换位效果
<title>css3幻灯片换位效果</title> <style type="text/css"> .flowGallery {width: ...
- 第八十节，CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 ...
- Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
- 测试css3的动画效果在display:none的时候不耗费性能
也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...
- css3写下雨效果
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- CSS3 速移动效果动画流畅无卡顿
js或jquery 元素移动以像素计算,手机上移动效果会有卡顿 利用CSS3 可以很简单的实现流畅的移动动画 transform: translate3d(66px, 88px, 0px) rotat ...
随机推荐
- Java虚拟机15：再谈四种引用状态
JVM的四种引用状态 在Java虚拟机5:Java垃圾回收(GC)机制详解一文中,有简单提到过JVM的四种引用状态,当时只是简单学习,知道有这么一个概念,对四种引用状态理解不深.这两天重看虚拟机这部分 ...
- 增广拉格朗日乘子法（Augmented Lagrange Method）
转载自:增广拉格朗日乘子法(Augmented Lagrange Method) 增广拉格朗日乘子法的作用是用来解决等式约束下的优化问题, 假定需要求解的问题如下: minimize f(X) s.t ...
- 【Android Developers Training】 83. 实现高效网络访问来优化下载
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【Android Developers Training】 72. 缩放一个视图
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 关于jquery全选反选 批量删除的一点心得
废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...
- isNAN()的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 妙用Outlook2003群发商业邮件
妙用Outlook2003群发商业邮件 我们知道,如果需要在Outlook 2003中向多个对象发送邮件,那么只需要在指定收件人时用分号输入多个邮件地址或者使用抄送方式即可:假如对象较多,可以使用 ...
- VB6之GIF分解
原文链接:http://hi.baidu.com/coo_boi/item/1264a64172fe8dec1f19bc08 还是找了个C++的翻译下,原文链接:http://www.360doc.c ...
- 为Dynamics 365写一个简单程序实现解决方案一键迁移
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复258或者20170627可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- xtrabackup备份mysql数据库的使用方法
xtrabackup是由percona提供的mysql备份工具,它是一款物理备份工具,通过连接数据库把数据库的数据备份出来.对于innodb存储引擎其支持全量备份和增量备份.对于myisam存储引擎只 ...