css 实现3D效果
目录
- 一、需要用到的属性
- 二、立方体实现
一、需要用到的属性
主要用到两个属性：transform-style属性和animation属性
transform-style是用来开启3D效果的属性，而animation是用来让元素实现3D的动画效果
我们以制作一个3D的立方体为例。
transform详细属性，animation详细属性
二、立方体实现
先把html部分写出来，我们需要把立方体的6个面都先表示出来。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link rel="stylesheet" href="./css/test.css">
head>
<body >
<div class="continer">
<main>
<div class="front">div>
<div class="back">backdiv>
<div class="left">leftdiv>
<div class="right">rightdiv>
<div class="top">topdiv>
<div class="bottom">bottomdiv>
main>
div>
body>
html>
上面分别把6个面先定义了出来，接下来是css部分。
代码如下：
第一步：定义容器的大小和位置
.continer {
width: 300px;
height: 300px;
perspective: 800px;
margin: 200px;
margin-left: 400px;
}
/*定义容器下的每个面的大小*/
.continer div{
font-size: 50px;
text-align: center;
width: 100%;
height: 100%;
position: absolute;
}
/*
transform-style: preserve-3d;开启3D效果
main包括了整个立方体的所有div，所以实现动画效果的时候是整体在动
*/
main {
width: 100%;
height: 100%;
transform-style: preserve-3d;
/*第一个参数是关键帧的名字，第二个参数是动画的时长，
第三个参数是动画从头到尾的速度是相同的。
第四个参数是播放的次数，infinite是无限次
*/
animation: rotate 1s linear infinite;
}
关键帧我们在后面定义，可以先把animation属性写出来。
其中perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。
上面的描述可能让人难以理解一些，其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。
第二步：画前面的正方形
.front {
background: rgba(100, 0, 100, 0.6);
transform: translateZ(150px);
}
效果：
translateZ(150px)的意思就是将这个div沿着z轴向前移动150px；
在css中,3d属性设置的z轴指的是屏幕到人的眼睛的方向为正方向的轴
每一面的div标签中都写了文字，方便等下理解图形的的旋转和移动。现在还是揉成一坨的，因为其它的div还没给样式。
第三步：画后面的正方形
.back {
background: rgba(0, 100, 100, 0.5);
transform: translateZ(-150px);
}
translateZ(-150px)就是将div元素向后移动150px，此时可以看到前面和后面的层次关系了，明显紫色在深紫色的前面。
第四步：画出左面
.left {
background: rgba(100, 1000, 100, 0.5);
transform: rotateY(90deg) translateZ(-150px);
}
rotateY(90deg)就是把div沿着y轴旋转90°，然后再用translateZ(-150px)把它向左移动，旋转之后坐标轴也跟着旋转了，所以此时的Z轴是旋转之后的div的前面。
第五步：画出右面
.right {
background: rgba(1000, 100, 100, 0.5);
transform: rotateY(90deg) translateZ(150px);
}
rotateY(90deg)先将div沿着y轴旋转90°，再用translateZ(150px)将div向右移动150px。
第六步：画出上面
.top {
background: rgba(1000, 0, 0, 0.5);
transform: rotateX(90deg) translateZ(150px);
}
rotateX(90deg)将div沿着x轴旋转90°，再用translateZ(150px)向上移动150px；
第七步：画出底面
.bottom {
background: rgba(0, 0, 1000, 0.5);
transform: rotateX(90deg) translateZ(-150px);
}
rotateX(90deg)将div沿着x轴旋转90°，再用translateZ(150px)向下移动150px；
此时可以看到每个面的文字都到了对应的位置，每个面也都画了出来，清晰可见。
第八步：关键帧的定义
这一步就是让立方体实现3d动态效果的关键一步；
代码如下：
@keyframes rotate {
from {
/*
rotateX(0) rotateY(0)表示从坐标（0，0）开始
*/
transform: rotateX(0) rotateY(0);
}
to {
/*
rotateX(360deg) rotateY(360deg)表示立方体沿着x轴旋转360°后再沿着y轴旋转360°
在第一步中定义了播放次数为无限次，所以
*/
transform: rotateX(360deg) rotateY(360deg);
}
}
此时立方体就可以动起来了。
CSS完整代码：
.continer {
width: 300px;
height: 300px;
perspective: 800px;
margin: 200px;
margin-left: 400px;
}
.continer div{
font-size: 50px;
text-align: center;
width: 100%;
height: 100%;
position: absolute;
}
main {
width: 100%;
height: 100%;
transform: translateZ(-150px);
transform-style: preserve-3d;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {
transform: rotateX(0) rotateY(0);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.front {
background: rgba(100, 0, 100, 0.6);
transform: translateZ(150px);
}
.back {
background: rgba(0, 100, 100, 0.5);
transform: translateZ(-150px);
}
.left {
background: rgba(100, 1000, 100, 0.5);
transform: rotateY(90deg) translateZ(-150px);
}
.right {
background: rgba(1000, 100, 100, 0.5);
transform: rotateY(90deg) translateZ(150px);
}
.top {
background: rgba(1000, 0, 0, 0.5);
transform: rotateX(90deg) translateZ(150px);
}
.bottom {
background: rgba(0, 0, 1000, 0.5);
transform: rotateX(90deg) translateZ(-150px);
}