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 ...
随机推荐
- SpringBoot进阶教程(七十五)数据脱敏
无论对于什么业务来说,用户数据信息的安全性无疑都是非常重要的.尤其是在数字经济大火背景下,数据的安全性就显得更加重要.数据脱敏可以分为两个部分,一个是DB层面,防止DB数据泄露,暴露用户信息:一个是接 ...
- go微服务框架kratos学习笔记二(kratos demo 结构)
目录 api cmd configs dao di model server service 上篇文章go微服务框架kratos学习笔记一(kratos demo)跑了kratos demo 本章来看 ...
- GPFS 文件系统部署步骤
GPFS 文件系统部署步骤 参考文档: 简书网友提供: https://www.jianshu.com/p/a0ecc0838b3b?utm_campaign=maleskine&utm_co ...
- xtrabackup: error: xb_load_tablespaces() failed with error code 57
问题描述:在数据库上运行xtrabackup备份脚本出现的一些报错 DB_version:mysql8.0.26 Xtrabackup:percona-xtrabackup-8.0.27-19-Lin ...
- Git rebase使用小结
1.分支之间rebase 构造两个分支master和feature,其中feature是在提交点B处从master上拉出的分支 master上有一个新提交M,feature上有两个新提交C和D 此时我 ...
- 介绍ServiceSelf项目
ServiceSelf 做过服务进程功能的同学应该接触过Topshelf这个项目,它在.netframework年代神一搬的存在,我也特别喜欢它.遗憾的是在.netcore时代,这个项目对.netco ...
- ADC采样时间、Chirp扫频时间、Chirp重复周期的区分
图1 FMCW雷达信号参数 在德州仪器TI毫米波雷达中,开发板参数配置往往涉及如图1所示的信号参数. 宏观上看,信号参数包括\(ADC\)采样时间.脉冲重复周期(\(Chirp\)扫频周期)和帧时间( ...
- Zabbix - 部署随笔
部署Zabbix服务端 准备机器,初始化环境 #查看IP地址 [root@Minimal ~]# ifconfig ens33 | awk 'NR==2{print $2}' 10.0.0.243 # ...
- ASP.NET Core设置URLs的几种方法，完美解决.NET 6项目局域网IP地址远程无法访问的问题
近期在dotnet项目中遇到这样的问题:.net6 运行以后无法通过局域网IP地址远程访问.后查阅官方文档.整理出解决问题的五种方式方法,通过新建一个新的WebApi项目演示如下: 说明 操作系统:U ...
- 这可能是最全面的MySQL面试八股文了
什么是MySQL MySQL是一个关系型数据库,它采用表的形式来存储数据.你可以理解成是Excel表格,既然是表的形式存储数据,就有表结构(行和列).行代表每一行数据,列代表该行中的每个值.列上的值是 ...