mirror of
https://github.com/tweenjs/tween.js.git
synced 2025-12-08 20:16:12 +00:00
42 lines
1.1 KiB
HTML
42 lines
1.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Tween.js / hello world (JS modules)!</title>
|
|
<link href="./style.css" rel="stylesheet" />
|
|
|
|
<style>
|
|
#target {
|
|
position: absolute;
|
|
transform-style: preserve-3d;
|
|
transform: translate3d(100px, 100px, 0.0001px) rotateY(10deg);
|
|
width: 100px;
|
|
height: 100px;
|
|
background: #a0dde9;
|
|
padding: 1em;
|
|
}
|
|
</style>
|
|
|
|
<!-- Use an import map to tell the browser where to find the package
|
|
named "@tweenjs/tween.js" when a JS module import statement imports
|
|
`from '@tweenjs/tween.js'`. See the import statement in ./index.js. -->
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"@tweenjs/tween.js": "./node_modules/@tweenjs/tween.js/dist/tween.esm.js"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="info">
|
|
<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
|
|
<h2>00 _ hello world (using native JS modules)</h2>
|
|
<p>Simple example for illustrating the creation and chaining of tweens.</p>
|
|
</div>
|
|
|
|
<div id="target">hello world!</div>
|
|
|
|
<script type="module" src="./index.js"></script>
|
|
</body>
|
|
</html>
|