css3 3D盒子效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 198px;
height: 198px;
padding: 198px;
border: 1px solid black;
margin: 200px auto;
perspective: 300px;
}
.wrap ul{
width: 198px;
height: 198px;
position: relative;
transition: 10s;
transform-style: preserve-3d;
transform-origin: center center -99px;
}
.wrap ul li{
width: 198px;
height: 198px;
position: absolute;
font: 50px/100px "微软雅黑";
text-align: center;
color: #fff;
background-image: url(bg.jpg);
background-repeat: no-repeat;
}
.wrap ul li:nth-of-type(1){
background-color: red;
left: 0;
top: -198px;
transform-origin: bottom;
transform: rotateX(90deg);
background-position: -393px -393px;
}
.wrap ul li:nth-of-type(2){
background-color: yellow;
left: -198px;
top: 0;
transform-origin: right;
transform: rotateY(-90deg);
background-position: 0 -198px;
}
.wrap ul li:nth-of-type(3){
background-color: blue;
left: 0;
top: 0;
transform: translateZ(0px);
background-position: -197px -196px;
}
.wrap ul li:nth-of-type(4){
background-color: green;
left: 198px;
top: 0;
transform-origin: left;
transform: rotateY(90deg);
background-position: -393px -196px;
}
.wrap ul li:nth-of-type(5){
background-color: pink;
left: 0;
top: 198px;
transform-origin: top;
transform: rotateX(-90deg);
background-position: -589px -196px;
}
.wrap ul li:nth-of-type(6){
background-color: purple;
left: 0;
top: 0;
transform: translateZ(-198px);
background-position: -393px 0;
}
.wrap:hover ul{
transform:rotateX(720deg) rotateY(720deg) rotateZ(720deg);
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
效果图：
css3 3D盒子效果的更多相关文章
- [应用][js+css3]3D盒子导航[PC端]
CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...
- 初识css3 3d动画效果
(先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- css3 3d翻转效果
<div class="demo"> <span class="front"> aaaaaaaaaaa ...
- CSS3 3D立方体效果
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- css3+javascript旋转的3d盒子
今天写点css3,3d属性写的3d盒子,结合javascript让盒子随鼠标旋转起来 今天带了css3新属性3d <!DOCTYPE html> <html> <head ...
- CSS3带你实现3D转换效果
前言 在css3中允许使用3D转换来对元素进行格式化,在原本只是2D转化的平面中引入了Z轴.在这之前我们讲解了css3中的2D转换,也就是二维空间变换,本篇的3D转换就是基于原来的2D转换而来,与2D ...
- 纯css3 transforms 3D文字翻开翻转3D开放式效果
详细内容请点击 在线预览立即下载 在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果.教程的目的是展示我们如何能带来一些生活上使用CSS3 . html: <ul class=&q ...
- css3之3D翻牌效果
最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...
随机推荐
- 非堵塞socket实现android手机与PC的文件传输
项目须要是通过WIFI建立手机和PC的通信,然后自己定义一个简单的协议对要传输的文件进行校验,传输的文件是2张3M的图片,要求考虑网络中断情况处理. 我这里採用的是非堵塞socket来实现的,之前查过 ...
- SOA是什么
一.SOA是什么 SOA的全称是Service-Oriented Architecture,面向服务架构.是一种架构,不是一种具体的开发技术. 要真正理解什么是SOA需要从软件开发的技术发展史 ...
- iOS swift使用xib绘制UIView
目标:用xib绘制一个UIView,在某个ViewController中调用. 三个文件:ViewController.Swift DemoView.swift DemoView.xib ...
- android83 Activity的生命周期,启动模式,返回时传递数据
#Android四大组件 * Activity * BroadCastReceiver * Service * ContentProvider #Activity生命周期 * oncreate:Act ...
- App升级时数据库的迁移更新
前一段时间在进行App升级的时候,由于一开始版本初期没有考虑完善,导致走了很多弯路,后来经过自己的一些思考,总结出了一些在app升级的时候,数据库内文件同步保持更新的经验,希望能给大家带来帮助. 总体 ...
- hdu2073递推题
无限的路 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissio ...
- 解析嵌套json字符串，一个json字符串中嵌套另一个json字符串
我现在有一个字符串是这样: { "msg": { ", "attrName": "sensorData", "trans ...
- Android pulltorefresh引用遇到的一个问题
今天在使用pulltorefresh插件的时候遇到了一个让人头疼的问题,在Eclipse中导入要用到的library项目,然后新建一个项目引入Library,显示的是引入成功,如图 而且project ...
- css3 文本超出后出现省略号
clip:当内联内容溢出块容器时,将溢出部分裁切掉. ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...). 当块容器 <' overflow '> 为非visible时, ...
- 经典关于多态的demo
class Foo { public int a; public Foo() { a = 3; } public int addFive() { a += 5; return a; } public ...