纯CSS实现3D旋转

来源：互联网发布：到淘宝上买二手钢琴编辑：程序博客网时间：2024/06/02 19:19

perspective

设置元素被查看位置的视图------视距

perspective-origin:x y

设置观察的视角 x为横向 y为纵向

例子：
实现可旋转的立方体
这里写图片描述

1.盒子的四边各用一个div表示
2.将四个div用一个大的div scroll包住，将这个大的div作为旋转的中轴线对其他四个div进行布局的设置

<body>    <div id="scroll">        <div id="tri1">1</div>        <div id="tri2">2</div>        <div id="tri3">3</div>        <div id="tri4">4</div>    </div></body>

1)首先将整个正方体调到页面中心(Scroll绝对定位父容器body相对定位设置scroll的left、right、top、bottom为0,再设置margin:auto即可)

2)设置四个div也为绝对定位 top和left皆为0 并且width和height都和父容器scroll相同使得五个div都重合在页面中间

3)接下来对四个div进行旋转平移调整(相对于scroll)
前后两个div只需要进行沿z轴方向的平移即可平移像素皆为自身宽度的一半

transform:translateZ(-width/2);        transform:translateZ(width/2);

左右两个div先进行旋转90度后再进行Z轴方向的平移(旋转90度之后Z轴为页面水平方向)自身宽度的一般

    transform:rotate(90deg) translateZ(width/2);        transform:rotate(90deg) translateZ(-width/2);

接下来用animation加动画

用@keyframes定义动画        @keyframes rota{            from{transform:rotateY(0deg);}            to{transform:rotateY(360deg);}        }    延y轴旋转360度

对scroll调用该动画并且设置相关属性

                        animation-name:rota;                        animation-timing-function:linear;                        animation-duration:.6s;                        animation-fill-mode:forwards;

再用transform-style加入3d显示

                        transform-style:preserve-3d;

这样一个旋转的立方体就做好了通过改变perspective属性可以让它显示的更加逼真

0 0