说明
css3 3d在网页中有很多的应用,下面我们来用它制作一个正立方体。
实现方法1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:300px;
height:300px;
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
/* 3D的空间 */
transform-style: preserve-3d;
/* 为了方便观察让3D舞台转动角度 */
transform:rotateX(20deg) rotateY(30deg);
transition:2s;
}
.box div{
width:300px;
height:300px;
text-align: center;
line-height:300px;
font-size: 100px;