立方体
立方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立方体</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
position: absolute;
left: 0;
top: 0;
right: 0;
margin: 0;
margin: auto;
width: 300px;
height: 300px;
border: 1px solid #000;
perspective: 200px;
/*transform-style:preserve-3d;*/
}
#wrap > .box{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
/*background: #f0f;*/
transition: 3s;
transform-style:preserve-3d;
transform-origin: center center -50px;
}
#wrap > .box > div{
position: absolute;
width: 100px;
height: 100px;
background: rgba(123,125,212,.3);
text-align: center;
font: 50px/100px "微软雅黑";
backface-visibility:hidden;
}
#wrap > .box > div:nth-child(5){
transform-origin: bottom;
transform: rotateX(90deg);
top: -100px;
}
#wrap > .box > div:nth-child(6){
transform-origin: top;
transform: rotateX(-90deg);
bottom: -100px;
}
#wrap > .box > div:nth-child(3){
transform-origin: right;
transform: rotateY(-90deg);
left: -100px;
}
#wrap > .box > div:nth-child(4){
transform-origin: left;
transform: rotateY(90deg);
right: -100px;
}
#wrap > .box > div:nth-child(2){
transform:translateZ(-100px) rotateX(180deg);
}
#wrap > .box > div:nth-child(1){
z-index:1;
}
#wrap:hover .box{
transform:rotate3d(20,13,43,720deg);
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>
</div>
</body>
</html>
三棱柱
三棱柱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三棱柱</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
position: absolute;
left: 0;
top: 0;
right: 0;
margin: 0;
margin: auto;
width: 300px;
height: 300px;
border: 1px solid #000;
perspective: 200px;
/*transform-style:preserve-3d;*/
}
#wrap > .box{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
/*background: #f0f;*/
transition: 3s;
transform-style:preserve-3d;
transform-origin: center center -28.867513459481287px;
}
#wrap > .box > div{
position: absolute;
width: 100px;
height: 100px;
background: rgba(123,125,212,.3);
text-align: center;
font: 50px/100px "微软雅黑";
backface-visibility:hidden;
transform-origin: center center -28.867513459481287px;
}
#wrap > .box > div:nth-child(3){
transform:rotateY(240deg);
}
#wrap > .box > div:nth-child(2){
transform:rotateY(120deg);
}
#wrap > .box > div:nth-child(1){
}
#wrap:hover .box{
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>
多棱柱
多棱柱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三棱柱</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
position: absolute;
left: 0;
top: 0;
right: 0;
margin: 0;
margin: auto;
width: 300px;
height: 300px;
/*border: 1px solid #000;*/
perspective: 200px;
/*transform-style:preserve-3d;*/
}
#wrap > .box{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
transition: 3s transform;
transform-style:preserve-3d;
/*transform-origin: center center -28.867513459481287px;*/
/* animation-name: rotate;
animation-duration: 2s;
animation-timing-function:linear;
animation-iteration-count:infinite;*/
animation:rotate 5s linear infinite;
}
#wrap > .box > div{
position: absolute;
width: 100px;
height: 100px;
background: rgba(123,125,212,.3);
text-align: center;
font: 50px/100px "微软雅黑";
/*backface-visibility:hidden;*/
/*transform-origin: center center -28.867513459481287px;*/
}
#wrap:hover .box{
/*transform: rotateY(360deg);*/
}
@keyframes rotate{
0%{
transform:none;
}
100%{
transform: rotateY(-360deg);
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<!-- <div>1</div>
<div>2</div>
<div>3</div> -->
</div>
</div>
<script>
window.onload = function(){
createLZ(8)
}
function createLZ(n){
let boxNode= document.querySelector("#wrap > .box")
let styleNode = document.createElement("style")
let degOut = 360/n
let degIn = 180-360/n
let div = ""
let css = ""
let frg1 = document.createDocumentFragment()
let frg2 = document.createDocumentFragment()
for(let i=0; i<n; i++){
div = document.createElement('div')
div.innerHTML = i+1
frg1.appendChild(div)
css += '#wrap > .box > div:nth-child('+(i+1)+'){transform:rotateY('+(i*degOut)+'deg);}'
}
boxNode.appendChild(frg1)
let subNode = document.querySelector("#wrap > .box > div")
let length = subNode.offsetWidth
css += "#wrap > .box{transform-origin:center center -"+(length/2*Math.tan(degIn/2*Math.PI/180))+"px;}"
css += "#wrap > .box > div{transform-origin:center center -"+(length/2*Math.tan(degIn/2*Math.PI/180))+"px;}"
console.log(frg1)
console.log(css)
styleNode.innerHTML = css
document.head.appendChild(styleNode)
}
</script>
</body>
</html>
