|
Сообщение от рони
|
|
делайте пример целиком, а не часьтями и c run
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Squama</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
#square {
width: 600px;
height: 600px;
border: 1px solid black;
}
#minSquare {
position: relative;
margin: 5%;
width: 500px;
height: 500px;
border: 1px solid black;
background-color: yellow;
/*overflow: hidden;*/
}
#first {
position: absolute;
height: 100%;
width: 500px;
margin-top: -2%;
z-index: 1;
}
#second {
position: absolute;
height: 100%;
width: 500px;
margin-left: 4%;
z-index: 2;
perspective: 200px;
}
.one {
width: 5%;
height: 5%;
background-color: red;
border: 1px solid black;
}
.one:hover {
/* */
/*perspective: 100px;*/
transform-origin: right;
transition: transform 0.5s;
transform: rotateY(60deg);
background-color: white;
}
</style>
</head>
<body>
<div id="square">
<div id="minSquare">
<div id="first">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
$(function() {
$('#minSquare').append('<div id="second">')
$('#second').css({'width': '100%', 'height': '100%'});
var widthOne = $('.one').width();
var heightOne = $('.one').height();
console.log('width of One block =' + widthOne);
console.log('heigh of One block =' + heightOne);
var rowWidth = $('#second').width();
var rowHeight = $('#second').height();
console.log('all Long #second = ' + rowHeight);
var full_height = $('.one').outerHeight();
;
while (rowHeight > full_height) {
$("#second > div ").each(function () {
full_height = $(this).height() + full_height;
});
$('#second').append('<div class="one">')
console.log('sum all Height div-es =' + full_height);
}
})
}
</script>
</body>
</html>