Skip to content

Instantly share code, notes, and snippets.

@bsmth

bsmth/transform-css.html

Last active December 28, 2022 13:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bsmth/b8b0763389f2948ab6f180bea7441bcf to your computer and use it in GitHub Desktop.
Save bsmth/b8b0763389f2948ab6f180bea7441bcf to your computer and use it in GitHub Desktop.
Download ZIP
Using 'transform-style' with 2d elements
Raw
transform-css.html
<!DOCTYPE html>
<html>
<style>
.wrapper {
transform-style: preserve-3d;
}
.wrapper2 {
transform-style: flat;
}
.box {
margin: 10px;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
transition: 0.5s;
border: 1px solid;
}
#box1:hover {
transform: scale(2, 0.5);
}
#box2:hover {
transform: rotate(0.5turn);
}
#box3:hover {
transform: scale(2, 0.5);
}
#box4:hover {
transform: rotate(0.5turn);
}
</style>
<div class="wrapper">
<div class="box" id="box1">scale X</div>
<div class="box" id="box2">scale X,Y</div>
</div>
<div class="wrapper2">
<div class="box" id="box3">scale X</div>
<div class="box" id="box4">scale X,Y</div>
</div>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment