CSS3实现嵌套立方体旋转的3D效果
刚发现一个网站上面的3D立方体效果挺好看的，就模仿着用CSS3实现了一个类似的效果：http://39.105.101.122/myhtml/CSS/transform_3D/cube_3D.html
没有做IE的兼容，在谷歌浏览器里面打开可以看到效果。
这样的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>
CSS3实现嵌套立方体旋转的3D效果的更多相关文章
- CSS环绕球体的旋转文字-3D效果
代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...
- 用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...
- 超绚丽CSS3多色彩发光立方体旋转动画
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...
- transform 的旋转 ，3d效果，要添加3d效果的父级加上景深perspective。 3d效果的容器加上 transform-style：preserve-3d。
该技术用于创建一个多维的数据,在这个实例中使用了两个元素用于正面和反面.前面用来放置产品图片,底部用来放置产品信息.默认情况下产品信息隐藏起来,同时鼠标悬停在产品图片上时,隐藏在底部的产品信息在X轴放 ...
- UI动画练习 - CABasicAnimation：视图绕X/Y轴旋转（3D效果）
视图 3D 旋转 1 - 代码示例:以绕 X 轴旋转为例 1 #import "ViewController.h" 2 @interface ViewController () 3 ...
- css3学习--css3动画详解二（3d效果）
一.设置3D场景 perspective:800 //浏览器到物体的距离(像素)perspective-origin:50% (x轴) 50% (y轴) //视点的位置 transf ...
- 自己做得一个用于直观观察css3 transform属性中的rotate 3D效果
这段代码还是非常简单,是看了一个老师的视频受的启发,也是调用了很多个函数,所以比较杂乱吧! <!DOCTYPE html><html lang="en">& ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 纯CSS3实现一个旋转的3D立方体盒子
简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- 使用 Azure OpenAI 打造自己的 ChatGPT
一.前言 当今的人工智能技术正在不断发展,越来越多的企业和个人开始探索人工智能在各个领域中的应用.其中,在自然语言处理领域,OpenAI 的 GPT 系列模型成为了研究热点.OpenAI 公司的 Ch ...
- Notion AI : 让表达如此简单
前言 写作如说话,想说与说明白中间隔着沟壑! 下面用 Notion AI 作诗来作为本文开头吧. 想说与说明白(作者:Notion AI) 想说千言万语,说明白却难如登天. 言语之间,沟壑重重,思想与 ...
- C++/Qt网络通讯模块设计与实现(六)
前面章节主要讲述网络通讯客户端的实现,各位小伙伴需认真阅读以及理解,理会其中的思想,有疑问的地方可及时给我私信,我都会非常认真地解答大家的疑惑. C++/Qt网络通讯模块设计与实现(一) C++/Qt ...
- Kubernetes（K8S）内核优化常用参数详解
net.ipv4.tcp_keepalive_time=600 net.ipv4.tcp_keepalive_intvl=30 net.ipv4.tcp_keepalive_probes=10 net ...
- Java设计模式 —— 观察者模式
16 观察者模式 16.1 观察者模式概述 Observer Pattern: 定义对象之间的依赖关系(一对多),当一个对象的状态发生改变时,其关联的依赖对象均收到通知并自动更新. 观察者模式又称:发 ...
- xtrabackup8.0.27备份失败
问题描述:mysql8.0.27备份出现中断,重新备份发现xtrabackup备份失败,xtrabackup与mysql版本不匹配,后来想起来时mysql进行了升级,8.0.27->8.0.29 ...
- 【D01】Django中实现带进度条的倒计时功能（简易版）
首先说明简易版是只有一个 倒计时 和一个 进度条,页面加载后自动开始计时,下次计时需要手动刷新页面. 后续会更新实现完整的倒计时功能的文章 前期准备 前端框架 你需要准备一些前端框架:Bootstra ...
- win11 计算器的进制转换
- HashMap实现原理和自动扩容
HashMap实现原理: JDK1.7:数组+单向链表(头插) 在并发情况下头插可能出现循环链表(死循环)问题.原因:因为头插,在新数组中链表的元素顺序发生了变化, 如上图,假设线程1在扩容,刚刚调整 ...
- vue刷新当前组件的方法
一:v-if控制组件,先设false,再true强制刷新组件(有时会产生一种奇怪的效果) 1 <medical-record v-if="fresh" /> 2 3 t ...