CSS3实现嵌套立方体旋转的3D效果

刚发现一个网站上面的3D立方体效果挺好看的,就模仿着用CSS3实现了一个类似的效果:http://1.huizit1.applinzi.com//CSS/transform_3D/cube_3D.html

这样的3D透视效果主要是用了perspective和transform-style: preserve-3d;这两个属性。然后在相应的元素上添加transform就行了。

先看一下布局结构:

<div class="container">
        <div class="box">
            <ul class="cube_1">
                <li><img src="../Img/1.jpg"></li>
                <li><img src="../Img/2.jpg"></li>
                <li><img src="../Img/3.jpg"></li>
                <li><img src="../Img/4.jpg"></li>
                <li><img src="../Img/5.jpg"></li>
                <li><img src="../Img/6.jpg"></li>
            </ul>
            <ul class="cube_2">
                <li><img src="../Img/7.jpg"></li>
                <li><img src="../Img/8.jpg"></li>
                <li><img src="../Img/9.jpg"></li>
                <li><img src="../Img/1.jpg"></li>
                <li><img src="../Img/2.jpg"></li>
                <li><img src="../Img/3.jpg"></li>
            </ul>
        </div>
    </div>

container放在页面的适当位置,box放在container的中间位置。cube_1是外面的小正方体,cube_2是外面的小正方体。设置 ul 和 li 的position为absolute,居中定位,然后让每张图片绕Y轴或X轴旋转相应的角度,然后向Z轴移动相应的距离。布局完成后添加相应的动画,和鼠标移入的变化。

注意点:perspective和transform-style这两个属性我分别用在了cube_1和cube_2上面,设置透明度显示出来之后外面的立方体对里面的立方体没有遮挡的效果,我想这应该是cube_1和cube_2分别使用上述两个属性导致隔离开来互不影响的结果,然后又给container添加了transform-style:preserve-3d;发现遮挡效果出现了。问题解决。

代码写的有点乱,也比较臃肿:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>cube_3D</title>
  6 </head>
  7 <style type="text/css">
  8     *{
  9         margin: 0;
 10         padding: 0;
 11     }
 12     .container{
 13         width: 800px;
 14         height: 500px;
 15         background-color: #ccc;
 16         margin: 50px auto;
 17         position: relative;
 18     }
 19     .container .box{
 20         margin: auto;
 21         position: absolute;
 22         width: 1px;
 23         height: 1px;
 24         top: 0;
 25         left: 0;
 26         bottom: 0;
 27         right: 0;
 28         background-color: red;
 29         transform-style: preserve-3d;
 30     }
 31     @keyframes an1{
 32         0%{
 33             transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
 34         }
 35         25%{
 36             transform: rotateY(180deg) rotateX(45deg) rotateZ(0deg);
 37         }
 38         50%{
 39             transform: rotateY(360deg) rotateX(45deg) rotateZ(0deg);
 40         }
 41         75%{
 42             transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg);
 43         }
 44         100%{
 45             transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
 46         }
 47     }
 48     .container .box .cube_1{
 49         list-style: none;
 50         width: 200px;
 51         height: 200px;
 52         margin: -100px -100px;
 53         position: absolute;
 54         perspective: 4000px;
 55         transform-style: preserve-3d;
 56         animation: an1 10s linear 0s infinite;
 57     }
 58     .container .box .cube_1 li{
 59         position: absolute;
 60         width: 200px;
 61         height: 200px;
 62         opacity: 0.5;
 63         transition: transform .2s ease-in 0s;
 64     }
 65     .container .box .cube_1 li img{
 66         width: 200px;
 67         height: 200px;
 68     }
 69     .container .box .cube_1 li:nth-child(1){
 70         transform: rotateY(0deg) translateZ(100px);
 71         transition: all 1s ease-in 0;
 72     }
 73     .container .box .cube_1 li:nth-child(2){
 74         transform: rotateY(90deg) translateZ(100px);
 75     }
 76     .container .box .cube_1 li:nth-child(3){
 77         transform: rotateY(180deg) translateZ(100px);
 78     }
 79     .container .box .cube_1 li:nth-child(4){
 80         transform: rotateY(270deg) translateZ(100px);
 81     }
 82     .container .box .cube_1 li:nth-child(5){
 83         transform: rotateX(90deg) translateZ(100px);
 84     }
 85     .container .box .cube_1 li:nth-child(6){
 86         transform: rotateX(-90deg) translateZ(100px);
 87     }
 88
 89     .container .box .cube_2{
 90         list-style: none;
 91         width: 100px;
 92         height: 100px;
 93         position: absolute;
 94         margin: -50px -50px;
 95         perspective: 4000px;
 96         transform-style: preserve-3d;
 97         animation: an1 10s linear 0s infinite;
 98     }
 99     .container .box .cube_2 li{
100         position: absolute;
101         width: 100px;
102         height: 100px;
103     }
104     .container .box .cube_2 li img{
105         width: 100px;
106         height: 100px;
107     }
108     .container .box .cube_2 li:nth-child(1){
109         transform: rotateY(0deg) translateZ(50px);
110     }
111     .container .box .cube_2 li:nth-child(2){
112         transform: rotateY(90deg) translateZ(50px);
113     }
114     .container .box .cube_2 li:nth-child(3){
115         transform: rotateY(180deg) translateZ(50px);
116     }
117     .container .box .cube_2 li:nth-child(4){
118         transform: rotateY(270deg) translateZ(50px);
119     }
120     .container .box .cube_2 li:nth-child(5){
121         transform: rotateX(90deg) translateZ(50px);
122     }
123     .container .box .cube_2 li:nth-child(6){
124         transform: rotateX(-90deg) translateZ(50px);
125     }
126
127     .container .box:hover .cube_1 li:nth-child(1){
128         transform: rotateY(0deg) translateZ(200px);
129     }
130     .container .box:hover .cube_1 li:nth-child(2){
131         transform: rotateY(90deg) translateZ(200px);
132     }
133     .container .box:hover .cube_1 li:nth-child(3){
134         transform: rotateY(180deg) translateZ(200px);
135     }
136     .container .box:hover .cube_1 li:nth-child(4){
137         transform: rotateY(270deg) translateZ(200px);
138     }
139     .container .box:hover .cube_1 li:nth-child(5){
140         transform: rotateX(90deg) translateZ(200px);
141     }
142     .container .box:hover .cube_1 li:nth-child(6){
143         transform: rotateX(-90deg) translateZ(200px);
144     }
145 </style>
146 <body>
147     <div class="container">
148         <div class="box">
149             <ul class="cube_1">
150                 <li><img src="../Img/1.jpg"></li>
151                 <li><img src="../Img/2.jpg"></li>
152                 <li><img src="../Img/3.jpg"></li>
153                 <li><img src="../Img/4.jpg"></li>
154                 <li><img src="../Img/5.jpg"></li>
155                 <li><img src="../Img/6.jpg"></li>
156             </ul>
157             <ul class="cube_2">
158                 <li><img src="../Img/7.jpg"></li>
159                 <li><img src="../Img/8.jpg"></li>
160                 <li><img src="../Img/9.jpg"></li>
161                 <li><img src="../Img/1.jpg"></li>
162                 <li><img src="../Img/2.jpg"></li>
163                 <li><img src="../Img/3.jpg"></li>
164             </ul>
165         </div>
166     </div>
167 </body>
168 </html>
时间: 2024-10-07 19:40:26

CSS3实现嵌套立方体旋转的3D效果的相关文章

纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效

这是一款效果非常酷的纯CSS3全屏3D立方体旋转展示幻灯片特效.该幻灯片使用全屏的3D立方体作为slide的载体,通过上下导航按钮,可以垂直旋转立方体,将立方体各个面上的幻灯片图片展示出来,效果非常炫酷. 在线预览   源码下载 使用方法 HTML结构 该幻灯片的立方体结构使用的是一个无序列表来制作,每一个<li>元素是一个立方体的面.幻灯片的上下导航按钮使用的是radio单选按钮和label来制作.整个3D立方体幻灯片被包裹在一个div容器中. 1 2 3 4 5 6 7 8 9 10 11

HTML5 CSS3 诱人的实例: 3D立方体旋转动画DEMO

创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的例子,感觉很不错,不过实在想不出来实际的用处,但是效果很炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景,即面上的小格格 3. @-webkit-keyframes 实现动画 HTML: <body> <div class="stage"> &l

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" clas

基于css3的3D立方体旋转特效

今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="box1 box"> 1</div> <div class="box2 box">

10.14 CSS3制作3D图片立方体旋转特效

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3制作3D图片立方体旋转特效 - 站长素材</title> <style type="text/css"> html{ background:linear-gradient(#ff0 0%,#F00 80%); height: 100%; } .wrap{

网页特效:用CSS3制作3D图片立方体旋转特效

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3制作3D图片立方体旋转特效 - 站长素材</title> <style type="text/css"> html{ background:linear-gradient(#ff0 0%,#F00 80%); height: 100%; } .wrap{

解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果

解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在网上汇总了一些这样的代码. 二.3D效果代码 2.1.旋转相册 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转相

css3-实现3D立方体旋转

核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. 实例:        创建大小两个盒子,小盒子放在大盒子里面,通过3D立体定位调整各自的位置,呈现一个立方体的现状:然后定义鼠标移入后的动画帧事件.实现如下效果图一样的模型. HTML: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <

【CSS3进阶】酷炫的3D旋转透视

之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研究学习了一下相关的 CSS3 属性.webpack 的 LOGO 动画效果乍看不是很难,深入了解之后,觉得内部其实大有学问,自己折腾了一番,做了一系列相关的 CSS3 动画效果. 先上 demo ,没有将精力放在兼容上,请用 chrome 打开. 本文完整的代码,以及更多的 CSS3 效果,在我 g