kkapsner
Super Moderator
Ich wünsche eine besinnliche Zeit:
PS: nicht zu oft iterieren... macht den Browser etwas langsam
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Kochkurve</title>
<style type="text/css">
#canvas {
position: relative;
width: 500px;
height: 600px;
}
.segment.base0 {
transform: rotate(180deg);
position: absolute;
bottom: 150px;
left: 0;
}
.segment.base1 {
transform: rotate(-60deg);
transform-origin: left bottom;
position: absolute;
bottom: 150px;
left: 0;
}
.segment.base2 {
transform: rotate(60deg);
transform-origin: right bottom;
position: absolute;
bottom: 150px;
right: 0;
}
.segment {
width: 100%;
height: 0;
display: inline-block;
position: relative;
}
.segment.line {
border: 1px solid black;
border-width: 1px 0px;
}
.segment .segment {
width: 33.333333333333333333333333333333333%;
position: absolute;
bottom: 0;
}
.segment .child0 {
left: 0;
}
.segment .child1 {
transform: rotate(-60deg);
transform-origin: left;
left: 33.333333333333333333333333333333333%;
}
.segment .child2 {
transform: rotate(60deg);
transform-origin: right;
right: 33.333333333333333333333333333333333%;
}
.segment .child3 {
right: 0;
}
</style>
</head>
<body>
<div id="canvas"><span class="base0 segment line"></span><span class="base1 segment line"></span><span class="base2 segment line"></span></div>
<button id="iterate">iterate</button>
<script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script type="text/javascript">
function divideLine(line){
kkjs.css.className.remove(line, "line");
kkjs.css.className.add(line, "base");
for (var i = 0; i < 4; i += 1){
kkjs.node.create({
tag: "span",
className: "segment line child" + i,
parentNode: line
});
}
}
kkjs.event.add(kkjs.$("iterate"), "click", function(){
kkjs.css.$(".line").forEach(divideLine);
}).fireEvent("click");
</script>
</body>
</html>PS: nicht zu oft iterieren... macht den Browser etwas langsam
