使用CSS3的3D变换
位移属性 translateZ( ) 和旋转属性 rotateX( ) / rotateY( );
使子元素立体呈现:transform-style: preserve-3d; 方便预览效果。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
.wrapper{
width: 50%;
float: left;
}
.cube{
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-35deg) rotateY(30deg);
}
.side{
position: absolute;
width: 2em;
height: 2em;
background: rgba(255,99,71,0.6);
border: 1px solid rgba(0,0,0,0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front{
transform: translateZ(1em);
}
.bottom{
transform: rotateX(-90deg) translateZ(1em);
}
.top{
transform: rotateX(90deg) translateZ(1em);
}
.left{
transform: rotateY(-90deg) tra