Skip to content

Instantly share code, notes, and snippets.

@pianomanfrazier
Created February 6, 2020 05:14
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save pianomanfrazier/c341010ae13dcf9f58c0b10febe36427 to your computer and use it in GitHub Desktop.
Fan out images
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="style.css" type="text/css">
<title>Worksheets</title>
</head>
<body>
<div id="images"></div>
<script src="script.js"></script>
</body>
</html>
let el = document.getElementById('images')
let start = 3
for (var i = start, len = 9; i < len; i++) {
let filename
if (i < 10) {
filename = `output-0${i}.png`
} else {
filename = `output-${i}.png`
}
let scale = 0.4
let degree = 10
let offset = 25
let image = new Image(850 * scale, 1100 * scale)
image.src = filename
image.style = `transform: rotate(${(i - 6) * degree}deg); z-index: ${16-i}; left: ${i * offset}px;`
el.appendChild(image)
}
#images {
position: relative;
padding-top: 100px;
left: 200px;
bottom: 50px;
}
#images img {
position: absolute;
border: 1px solid #DDD;
transform-origin: bottom center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment