Skip to content

Instantly share code, notes, and snippets.

@naturallucky

naturallucky/[css]3D small set

Last active January 13, 2022 07:14
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 naturallucky/f6d7733023379f32748fad9c2103c360 to your computer and use it in GitHub Desktop.
Save naturallucky/f6d7733023379f32748fad9c2103c360 to your computer and use it in GitHub Desktop.
Download ZIP
css3D smal set
Raw
[css]3D small set
.view3D{
transform-style:preserve-3d;
perspective:300px;
perspective-origin: center center;
--rotate3DX:70deg;
--rotate3DY:0;
--rotate3DZ:0;
--move3DZ:50px;
}
.view3D>*{
transform-style:preserve-3d;
transform: perspective(300px) rotateX(var(--rotate3DX)) rotateY(var(--rotate3DY)) rotateZ(var(--rotate3DZ)) translateZ(-1px);
}
.view3D>*>*{
transform: translateZ(var(--move3DZ));
}
@naturallucky
Copy link
Author

naturallucky commented Jun 17, 2021 •
edited

usage : rotateX(70deg)

<div class="view3" style="--rotate3DX:70deg;">
    <div>children</div>
    <div>children</div>
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment