欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

学习 CSS 之用 CSS 3D 实现炫酷效果

程序员文章站 2022-06-19 10:38:36
一、前言 把大象关进冰箱需要几步?三步,把冰箱门打开,把大象关进去,把冰箱门关上。 用 CSS 实现 3D 效果需几步?三步,设置透视效果 perspective,改变元素载体为 preserve-3d,对元素进行 3D 转换操作。 perspective 属性决定了我们从什么地方查看元素,定义时的 ......

一、前言

  把大象关进冰箱需要几步?三步,把冰箱门打开,把大象关进去,把冰箱门关上。

  用 css 实现 3d 效果需几步?三步,设置透视效果 perspective,改变元素载体为 preserve-3d,对元素进行 3d 转换操作

  perspective 属性决定了我们从什么地方查看元素,定义时的 perspective 属性,它是一个元素的子元素,透视图,而不是元素本身。

  再说 3d 转换操作,需要用到的就是 translatex,translatey,translatez,写到一块就是 translate-3d,除此之外还有 rotatex,rotatey,rotatez。至于平移和旋转的方向,可以参考下面的三维坐标图:

  学习 CSS 之用 CSS 3D 实现炫酷效果

 

二、css 翻页效果

1.创建透视背景

  首先是要创建一个透视背景,也就是一个具有 perspective 属性的 div,这里我给 perspective 的值为800个像素单位。除此之外,还要有一个 div,将所有页面都包括在这个 div 中,这个 div 需要设置 position 为 relative,因为后面的页面都要使用绝对定位,并且要设置 transform-style 属性为 preserve-3d。相关 css 代码如下:

 1 .back {
 2     perspective: 800px;
 3     perspective-origin: 50% 50%;
 4     overflow: hidden;
 5     margin: 10px;
 6 }
 7 
 8 .content {
 9     width: 400px;
10     height: 400px;
11     margin: 0 auto;
12     transform-style: preserve-3d;
13     position: relative;
14 }

2.创建页面

  在 css 类为 content 的 div 中创建多个页面,将除了第一页以外的页面全都“放倒”,即以底边为变换中心,然后在 x 方向上旋转90度,css 代码如下:

transform-origin: bottom;

transform: rotatex(90deg);

  除此之外,还要设置 transition 属性,页面的 css 代码如下:

 1 .page {
 2     width: 360px;
 3     height: 360px;
 4     padding: 20px;
 5     background-color: black;
 6     color: white;
 7     font-weight: bold;
 8     font-size: 300px;
 9     text-align: center;
10     position: absolute;
11 }
12 
13 #p1 {
14     transform-origin: bottom;
15     transition: transform 1s linear;
16 }
17 
18 #p2,
19 #p3,
20 #p4,
21 #p5,
22 #p6 {
23     transform-origin: bottom;
24     transition: transform 1s linear;
25     transform: rotatex(90deg);
26 }

3.添加按钮实现翻页

  添加两个按钮用于实现向前翻页和向后翻页。向前翻页时,当前页面在 x 方向上旋转-90度,也就是向前旋转90度倒下了,然后将下一页改为 rotate(0deg) 立起来。向后翻页就是一个逆向的过程了,这里就不再赘述了。控制翻页的 js 代码如下:

 1 <script>
 2     var curindex = 1;
 3 
 4     function previous() {
 5         console.log(curindex);
 6         if (curindex === 1) {
 7             return
 8         }
 9         var curpage = document.getelementbyid("p" + curindex);
10         curpage.style.transform = "rotatex(90deg)";
11 
12         curindex--;
13         var prevpage = document.getelementbyid("p" + curindex);
14         prevpage.style.transform = "rotatex(0deg)";
15     }
16 
17     function next() {
18         console.log(curindex);
19         if (curindex === 6) {
20             return
21         }
22         var curpage = document.getelementbyid("p" + curindex);
23         curpage.style.transform = "rotatex(-90deg)";
24 
25         curindex++;
26         var nextpage = document.getelementbyid("p" + curindex);
27         nextpage.style.transform = "rotatex(0deg)";
28     }
29 </script>

  需要注意的是,在向前和向后翻页时,需要对第一页和最后一页进行一个判断。

 

三、css 旋转正方体

1.创建正方体

  用 css 创建一个旋转的正方体,首先也是要创建一个透视的背景,然后创建六个页面,分别进行平移和旋转操作,构造出一个正方体,css 代码如下:

 1 .face {
 2     width: 160px;
 3     height: 160px;
 4     padding: 20px;
 5     color: white;
 6     position: absolute;
 7     transition: transform 1s linear;
 8 }
 9 
10 #f1 {
11     background-color: aqua;
12 }
13 
14 #f2 {
15     background-color: blue;
16     transform-origin: right;
17     transform: rotatey(-90deg)
18 }
19 
20 #f3 {
21     background-color: green;
22     transform-origin: top;
23     transform: rotatex(-90deg)
24 }
25 
26 #f4 {
27     background-color: yellow;
28     transform-origin: bottom;
29     transform: rotatex(90deg)
30 }
31 
32 #f5 {
33     background-color: red;
34     transform-origin: left;
35     transform: rotatey(90deg)
36 }
37 
38 #f6 {
39     background-color: pink;
40     transform: translatez(-200px);
41 }

2.旋转正方体

  进行完第一步之后,一个正方体就已经出来了,但是我们还只能看到两个面,这时可以对整体进行一下旋转,就能看到更多的面了。js 代码如下:

1 <script>
2     setinterval(function() {
3         for (var i = 1; i < 361; i++) {
4             var ele = document.getelementbyid("content");
5             ele.style.transform = "rotate(" + i + "deg)";
6         }
7     }, 1000)
8 </script>

 

完整代码已上传到 github