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 Terraform（十三）提升 Azure Web App Plan 的性能
一,引言 一,引言 我们是否正在为部署在云主机上的应用程序性能缓慢和停机问题而苦恼?我们是否正在因为云主机上仅仅部署了应用程序,在流量平缓的时候而浪费大量的计算资源而心疼荷包.那么让我们来一起看看 A ...
- jinjia2基本用法
前言这几年一直在it行业里摸爬滚打,一路走来,不少总结了一些python行业里的高频面试,看到大部分初入行的新鲜血液,还在为各样的面试题答案或收录有各种困难问题 于是乎,我自己开发了一款面试宝典,希望 ...
- [MAUI 项目实战] 手势控制音乐播放器（二）： 手势交互
@ 目录 原理 交互实现 容器控件 手势开始 手势运行 手势结束 使用控件 拖拽物 创建pit集合 项目地址 原理 定义一个拖拽物,和它拖拽的目标,拖拽物可以理解为一个平底锅(pan),拖拽目标是一个 ...
- python和js实现AES加解密
小白学习中...... AES算法 AES全称为高级加密标准,是Advanced Encryption Standard的首字母简写.详细了解,可以找专门的资料进行学习. 场景 开发一个web网站过程 ...
- Python程序笔记20230302
Alice.Bob 和他们的朋友们 问题主体 密码学家 Rivest.Shamir.Adleman 于1977年4月撰写了一篇论文<数字签名与公钥密码学>(On Digital Signa ...
- 面试题：JS如何最快的执行垃圾回收机制
因为没看见答案,所以也不知道对不对. JavaScript 的垃圾回收机制是由 JavaScript 引擎自动管理的,通常情况下我们无法控制垃圾回收机制的执行时间和频率. 然而,我们可以采取一些优化策 ...
- 一分钟使用Gitee，把本地项目放入gitee仓库中
一.先创建一个Gitee账号 首先需要自己去别的地方看创建一个空仓库,然后复制仓库的地址 省略... 现有本地有项目代码,远程空仓库一个,如何把本地项目代码推到远程仓库? 1.在项目根目录初始化 Gi ...
- Linux 阶段二
1.2 安装JDK JDK具体安装步骤如下: 1). 上传安装包 使用FinalShell自带的上传工具将jdk的二进制发布包上传到Linux 由于上述在进行文件上传时,选择的上传目录为根目录 /,上 ...
- API 网关日志的价值，你了解多少？
本文介绍了 API 网关日志的价值,并以知名网关 Apache APISIX 为例,展示如何集成 API 网关日志. 作者钱勇,API7.ai 技术工程师,Apache APISIX Committe ...
- FLV文件分析
很久没看,做下关于FLV文件格式知识点回顾! 一.简单介绍 FLV(Flash Video)是Adobe公司推出的一种媒体封装格式.一个FLV文件,每个Tag类型都属于一个流.也就是说一 ...