Skip to content

Instantly share code, notes, and snippets.

@mitsuruog

mitsuruog/css3_3D_1.html

Created August 28, 2012 14:08
Show Gist options
  • Save mitsuruog/3498320 to your computer and use it in GitHub Desktop.
Save mitsuruog/3498320 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 use 3D Sample1
Raw
css3_3D_1.html
<style type="text/css">
div.content-3d{
top: 10px;
left: 10px;
position: relative;
}
div.content-3d div{
float: left;
opacity: 0.7;
position: absolute;
}
.top-pannel{
left: 0px;
top: 0px;
height: 0px;
width: 100px;
border-top: 60px solid aqua;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
.left-pannel{
left: 0px;
top: 0px;
height: 100px;
width: 0px;
border-left: 60px solid fuchsia;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
.right-pannel{
left: 160px;
top: 0px;
height: 100px;
width: 0px;
border-right: 60px solid lime;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
.buttom-pannel{
left: 0px;
top: 160px;
height: 0px;
width: 100px;
border-bottom: 60px solid saddlebrown;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
.front-pannel{
left: 60px;
top: 60px;
height: 100px;
width: 100px;
background: purple;
}
.float-right{
float: right;
}
</style>
</head>
<body>
<div class="content-3d">
<div class="top-pannel"></div>
<div class="left-pannel"></div>
<div class="right-pannel"></div>
<div class="buttom-pannel"></div>
<div class="front-pannel"></div>
</div>
</body>
@mitsuruog
Copy link
Author

CSS3のみを使った3D表現のサンプルです

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment