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做出 ...
随机推荐
- Java多线程小结
简述 Java是支持多线程编程的语言,线程相比于进程更加轻量级,线程共享相同的内存空间,但是拥有独立的栈.减少了进程建立.销毁的资源消耗.jdk1.5后对java的多线程编程提供了更完善的支持,使得j ...
- 《linux程序设计》--读书笔记--第十四章信号量、共享内存和消息队列
信号量:用于管理对资源的访问: 共享内存:用于在程序之间高效的共享数据: 消息队列:在程序之间传递数据的一种简单方法: 一.信号量 临界代码:需要确保只有一个进程或者一个执行线程可以进入这个临界代码并 ...
- 实现FTP断点续传
应用需求: 网盘开发工作逐步进入各部分的整合阶段,当用户在客户端修改或新增加一个文件时,该文件要同步上传到服务器端对应的用户目录下,因此针对数据传输(即:上传.下载)这一块现在既定了三种传输方式,即: ...
- IOS8开发之实现App消息推送
第一部分 Apple Push Notification Service 首先第一步当然是介绍一下苹果的推送机制(APNS)咯(ps:其实每一篇教程都有),先来看一张苹果官方对其推送做出解释的概要图. ...
- WebService学习笔记系列（二）
soap(简单对象访问协议),它是在http基础之上传递xml格式数据的协议.soap协议分为两个版本,soap1.1和soap1.2. 在学习webservice时我们有一个必备工具叫做tcpmon ...
- Android Studio导入aar依赖文件
以shareSDK为例,导入SMSSDK-2.1.1.aar: 首先将这个aar文件粘贴到libs文件夹下,然后在app目录下的build.gradle里操作 repositories{ flatDi ...
- php错误处理和异常处理
PHP错误处理有两种:标准的错误处理和异常(OOP语法新出现的错误处理机制)
- [Excel] CsvHelper---C#关于CSV文件的导入和导出以及转化 （转载）
点击下载 CsvHelper.rar 这个类是关于Csv文件的一些高级操作1.DataTable导出到CSV2.将Csv读入DataTable看下面代码吧 /// <summary> // ...
- 获取SqlServer当前链接数
1.提供有关 Microsoft SQL Server 数据库引擎实例中的当前用户.会话和进程的信息,显示所有session sp_who 2.针对 SQL Server 上的每个经过身份验证的会话返 ...
- 'EntityValidationErrors' property for more details
很多小猿遇到这个Exception 的时候,都会有点无厘头.这个时候最好try-- catch下,找到出错的地方.本人习惯在页面上加个lable标签,把exc msg(exception messag ...