css3 3D盒子效果

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <style>
  7             body{
  8                 margin: 0;
  9             }
 10             ul{
 11                 margin: 0;
 12                 padding: 0;
 13                 list-style: none;
 14             }
 15             .wrap{
 16                 width: 198px;
 17                 height: 198px;
 18                 padding: 198px;
 19                 border: 1px solid black;
 20                 margin: 200px auto;
 21                 perspective: 300px;
 22             }
 23             .wrap ul{
 24                 width: 198px;
 25                 height: 198px;
 26                 position: relative;
 27                 transition: 10s;
 28                 transform-style: preserve-3d;
 29                 transform-origin: center center -99px;
 30             }
 31             .wrap ul li{
 32                 width: 198px;
 33                 height: 198px;
 34                 position: absolute;
 35                 font: 50px/100px "微软雅黑";
 36                 text-align: center;
 37                 color: #fff;
 38                 background-image: url(bg.jpg);
 39                 background-repeat: no-repeat;
 40             }
 41             .wrap ul li:nth-of-type(1){
 42                 background-color: red;
 43                 left: 0;
 44                 top: -198px;
 45                 transform-origin: bottom;
 46                 transform: rotateX(90deg);
 47                 background-position: -393px -393px;
 48             }
 49             .wrap ul li:nth-of-type(2){
 50                 background-color: yellow;
 51                 left: -198px;
 52                 top: 0;
 53                 transform-origin: right;
 54                 transform: rotateY(-90deg);
 55                 background-position: 0 -198px;
 56             }
 57             .wrap ul li:nth-of-type(3){
 58                 background-color: blue;
 59                 left: 0;
 60                 top: 0;
 61                 transform: translateZ(0px);
 62                 background-position: -197px -196px;
 63             }
 64             .wrap ul li:nth-of-type(4){
 65                 background-color: green;
 66                 left: 198px;
 67                 top: 0;
 68                 transform-origin: left;
 69                 transform: rotateY(90deg);
 70                 background-position: -393px -196px;
 71             }
 72             .wrap ul li:nth-of-type(5){
 73                 background-color: pink;
 74                 left: 0;
 75                 top: 198px;
 76                 transform-origin: top;
 77                 transform: rotateX(-90deg);
 78                 background-position: -589px -196px;
 79             }
 80             .wrap ul li:nth-of-type(6){
 81                 background-color: purple;
 82                 left: 0;
 83                 top: 0;
 84                 transform: translateZ(-198px);
 85                 background-position: -393px 0;
 86             }
 87             .wrap:hover ul{
 88                 transform:rotateX(720deg) rotateY(720deg) rotateZ(720deg);
 89             }
 90         </style>
 91     </head>
 92     <body>
 93         <div class="wrap">
 94             <ul>
 95                 <li>1</li>
 96                 <li>2</li>
 97                 <li>3</li>
 98                 <li>4</li>
 99                 <li>5</li>
100                 <li>6</li>
101             </ul>
102         </div>
103     </body>
104 </html>

效果图：

时间： 2024-12-28 15:36:00

css3 3D盒子效果的相关文章

[应用][js+css3]3D盒子导航[PC端]

CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网站[iframe中],并可浏览,关闭后返回原来状态. 4.PC端,将额外显示2个css3做的旋转盒子[没什么意义] 5.移动端只显示一个导航盒子[模拟器正常,真机无效,留待以后查看,兼容开发有待提高...] 注:原本打算排列导航盒子,这样的话导航也变得比较好玩但是,如果使用iframe来显示网站预

CSS3 3D立方体效果

CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立方体的效果实例来深入了解css3的transform属性,下面是这个实例的截图,加上动画还能旋转起来哟,是不是很酷炫?换上你喜欢的女生的照片,就可以大胆的撩妹了,哈哈! 想要查看demo,请点击这里,3D transform立方体效果初识transform 顾名思义:变换.就可以想到它可以做很多很

css3 3d翻转效果

<div class="demo"> <span class="front"> aaaaaaaaaaaaaa </span> <span class="behind"> bbbbbbb </span> </div> .demo{ display: block; cursor: poi

css实现3D盒子效果

-------------------------------------- 用css3的新属性来设置3D盒子效果(chrome浏览器), 代码如下: ------------------------------------- 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3D-box<

创意水晶CSS3 - 3D立方体效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D立方体</title> <style> .box{ width: 249px; height: 249px; border: 1px dashed #000; margin: 120px auto; border-radius: 250px;

CSS3 3D 盒子模型

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin:0; padding:0; } ul,li{ list-style: none; } .wrap{ width:200px; height:200px; borde

css3+javascript旋转的3d盒子

今天写点css3,3d属性写的3d盒子,结合javascript让盒子随鼠标旋转起来今天带了css3新属性3d <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #a{ width: 200px; height: 200px; margin: 20

HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相册

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html(张鑫旭的博客 ),对前台感兴趣的可以没事去看看他的博客,很给力~ 这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没

CSS3的3D转换效果详解介绍

CSS3的3D转换效果详解介绍:本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只是此属性的部分应用,更多相关内容可以参阅CSS3的transform属性总略介绍一章节.掌握3D转换效果,可以从三个方法作为突破口,分别是rotateX, rotateY, rotateZ,在2D变换过程中rotate()函数的应用,它表示旋转的意思,由于是2D变换,所以它只是在一个平面进行旋转,所以无需细分,具体可以参阅CSS3的2D转换效果详细介绍一章节. 下面分别介绍一