css3简单实用的3d转换

/*css*/

body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}

.box {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 24px;
margin: 100px auto;
position: relative;
transform: rotateY(30deg) rotateX(-30deg);
transform-style: preserve-3d;

animation: rotate 8s linear infinite;
}

.front, .back, .left, .right, .top, .bottom {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
/*opacity: 0.5;*/
}

.front {
background-color: pink;
transform: rotateY(0) translateZ(100px);
}

.back {
background-color: blue;
transform: translateZ(-100px);
}

.left {
background-color: green;
transform: rotateY(90deg) translateZ(-100px);
}

.right {
background-color: yellow;
transform: rotateY(90deg) translateZ(100px);
}

.top {
background-color: red;
transform: rotateX(90deg) translateZ(100px);
}

.bottom {
background-color: orange;
transform: rotateX(90deg) translateZ(-100px);
}

@keyframes rotate {
from {
transform: rotateX(0) rotateY(360deg);
}

to {
transform: rotateX(360deg) rotateY(0);
}
}

 

/*html*/

<div class="box">
<div class="front">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>
</div>

提供一个实用css技巧的仓库

clone 这个仓库: https://github.com/l-hammer/You-need-to-know-css.git

用yarn 或者 npm全局安装docsify-cli: npm install docsify-cli -g (or yarn global add docsify-cli)

在终端运行命令 docsify serve

打开 http://localhost:3000 在你的浏览器