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 ...
随机推荐
- C++中va_list, va_start, va_arg, va_end的基本用法
关于va_list, va_start, va_arg, va_end 由于在C语言中没有函数重载,解决不定数目函数参数问题变得比较麻烦,即使采用C++,如果参数个数不能确定,也很难采用函数重载.对这 ...
- Linux文件系统故障，Input/output error
事情是这样的,在启动某一个应用程序的时候,出现 Input/output error 的报错,磁盘以及目录无法使用的情况下,进行了重启,重启完成后是可以正常使用的,过一段时间后就会再次出现这个问题,一 ...
- 【CTF】关于 .init .fini .init_array .fini_array 日志 2019.7.16 pwn
查找资料的高效性 retn 返回到栈顶地址 关于 .init .fini .init_array .fini_array 其中存放着的是在main函数执行前执行的代码,由__libc_start_ma ...
- python实现微信自动发消息功能
import timeimport uiautomation as autofrom uiautomation.uiautomation import Bitmapimport win32clipbo ...
- [网络/Linux]网络嗅探工具——nmap
1 nmap 简介 Nmap 即 Network Mapper,最早是Linux下的网络扫描和嗅探工具包. nmap是网络扫描和主机检测的工具,用nmap进行信息收集和检测漏洞,功能有: 检测存活主机 ...
- Java设计模式 —— 组合模式
11 组合模式 11.1 组合模式概述 Composite Pattern: 组合多个对象形成树形结构以表示具有部分-整体关系的层次结构.组合模式使得客户端可以统一处理单个对象和组合对象. 组合模式关 ...
- Semantic Kernel 入门系列：💾Native Function
语义的归语义,语法的归语法. 基础定义 最基本的Native Function定义只需要在方法上添加 SKFunction 的特性即可. using Microsoft.SemanticKernel. ...
- Redis 日志showlog 和 管道pileline
redis日志 slowlog-log-slower-than:指定执行时间超过多少微秒(1秒等于1000000微秒) 的命令请求会被记录到日志上 slowlog-max-len:指定服务器最多保存多 ...
- 一文教你如何使用Node进程管理工具-pm2
pm2 是什么 pm2 是一个守护进程管理工具,它能帮你守护和管理你的应用程序.通常一般会在服务上线的时候使用 pm2 进行管理.pm2 能做的其实有很多,比如监听文件改动自动重启,统一管理多个进程, ...
- WPF Window设置ResizeMode="NoResize"
WPF窗口设置属性ResizeMode="NoResize"时,回到桌面后,点击任意应用,都会将此窗口激活. 我们来看下详细操作: 1. WPF窗口设置属性ResizeMode 2 ...