css 实现3D效果_代码007(未授权)

本文介绍: css 实现3d 效果

主要用到两个属性：transform–style 属性和animation 属性
 transform–style是用来开启3D效果的属性，而animation是用来让元素实现3D的动画效果
 我们以制作一个3D的立方体为例。
transform详细属性，animation详细属性

先把html 部分写出来，我们需要把立方体的6个面都先表示出来。

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge" &gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    <title&gt;Document</title&gt;
    <link rel="stylesheet" href="./css/test.css">
</head>
<body >
    <div class="continer">
    <main>
    <!-- 前面-->
    <div class="front"></div>
    <!-- 后面-->
    <div class="back">back</div>
    <!-- 左面-->
    <div class="left">left</div>
    <!-- 右面-->
    <div class="right">right</div>
    <!-- 上面-->
    <div class="top">top</div>
    <!-- 下面-->
    <div class="bottom">bottom</div>
    </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;
}

其中per spect ive属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。
上面的描述可能让人难以理解一些，其实对于per spect ive属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。
第二步：画前面的正方形

.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);
}

@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);
    }
}

.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);
}