利用CSS3实现图片3D旋转

古城微笑少年丶 2022-04-15 01:08 988阅读 0赞

以下是本次所作的效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N5Z19sMDI_size_16_color_FFFFFF_t_70][]

鼠标可以从上下左右四个方向进入，然后会根据鼠标进入的方向进行相应的旋转，比如从上面进入，立方体就从上往下旋转，从右进入立方体就从右向左旋转

## 如何实现： ##

1、主要使用CSS3的3D旋转进行书写

2、对整体布局进行划分

3、利用少量JS实行鼠标的移入移出事件

HTML实现如下：

<ul>

<li>

</div>

</div>

</li>

<li>

</div>

</div>

</li>

<li>

</div>

</div>

</li>

</ul>

</div>

在这里使用了ul li里面添加一个小方块，小方块里面有两个面（由于除了证明后都是hide面），每次旋转时只需要改变hide块的位置即可

CSS样式实现：

\*\{

margin: 0;

padding: 0;

list-style: none;

.wrapper\{

width: 800px;

margin: 100px auto;

border: 1px solid \#000;

border-radius: 10px;

display: flex;

justify-content: center;

align-items: center;

.wrapper ul\{

width: 100%;

/\* height: 200px; \*/

display: flex;

justify-content: center;

align-items: center;

.wrapper ul li\{

width: 200px;

height: 200px;

margin: 20px;

perspective: 1000px;

.wrapper ul li .box\{

width: 200px;

height: 200px;

position: relative;

transform-style: preserve-3d;

animation: o.3s ease-out forwards;

.wrapper ul li .box .show\{

position: absolute;

width: 100%;

height: 100%;

.wrapper ul li .box .show img\{

width: 100%;

height: 100%;

.wrapper ul li .box .hide\{

position: absolute;

width: 100%;

height: 100%;

text-align: center;

font-size: 30px;

color: \#fff;

display: flex;

justify-content: center;

align-items: center;

background-color: \#000;

.wrapper ul li .box .show\{

transform: translateZ(100px);

.wrapper ul li .box .hide\{

transform: translateZ(-100px);

.wrapper ul li .box.in-top .hide,

.wrapper ul li .box.out-top .hide\{

transform: rotate3d(1,0,0,90deg) translateZ(100px);

.wrapper ul li .box.in-bottom .hide,

.wrapper ul li .box.out-bottom .hide\{

transform: rotate3d(1,0,0,-90deg) translateZ(100px);

.wrapper ul li .box.in-left .hide,

.wrapper ul li .box.out-left .hide\{

transform: rotate3d(0,1,0,-90deg) translateZ(100px);

.wrapper ul li .box.in-right .hide,

.wrapper ul li .box.out-right .hide\{

transform: rotate3d(0,1,0,90deg) translateZ(100px);

.wrapper ul li .box.in-top\{

animation-name: in-top;

.wrapper .box.out-top\{

animation-name: out-top;

.wrapper ul li .box.in-bottom\{

animation-name: in-bottom;

.wrapper .box.out-bottom\{

animation-name: out-bottom;

.wrapper ul li .box.in-left\{

animation-name: in-left;

.wrapper .box.out-left\{

animation-name: out-left;

.wrapper ul li .box.in-right\{

animation-name: in-right;

.wrapper .box.out-right\{

animation-name: out-right;

@keyframes in-top\{

0%\{

transform: rotate(0deg);

100%\{

transform: rotateX(-90deg);

@keyframes out-top\{

0%\{

transform: rotateX(-90deg);

100%\{

transform: rotateX(0deg);

@keyframes in-bottom\{

0%\{

transform: rotate(0deg);

100%\{

transform: rotateX(90deg);

@keyframes out-bottom\{

0%\{

transform: rotateX(90deg);

100%\{

transform: rotateX(0deg);

@keyframes in-left\{

0%\{

transform: rotateY(0deg);

100%\{

transform: rotateY(90deg);

@keyframes out-left\{

0%\{

transform: rotateY(90deg);

100%\{

transform: rotateY(0deg);

@keyframes in-right\{

0%\{

transform: rotateY(0deg);

100%\{

transform: rotateY(-90deg);

@keyframes out-right\{

0%\{

transform: rotateY(-90deg);

100%\{

transform: rotateY(0deg);

通过划分进入与出来的两种情况，分为两个类名实现，在进入之前需要将hide方块移动要旋转之前的位置，然后通过添加类名来实现旋转，其中利用animate的名字来控制box的旋转，而通过JS来控制类名的添加

这里强调以下  rotate旋转 对于X轴向里旋转是正角，向外旋转是负角，而对于Y轴向右旋转是正角，向左旋转是负角，其中旋转过程Z轴也会跟着改变，所以transform过程中书写顺序是很重要的。

这里的实现就是通过in-top和out-top来实现，同理bottom。left和right等一样的实现

JS代码：

function bindEvent() \{

$('.box').on('mouseenter', function(e) \{

addClassTo(this, e, 'in');

\}).on('mouseleave', function(e) \{

addClassTo(this, e, 'out');

\})

bindEvent();

function getDirect(dom, e)\{

var x = e.offsetX - dom.offsetWidth / 2;

var y = e.offsetY - dom.offsetHeight / 2;

var d = (Math.round(((Math.atan2(y, x) \* (180 / Math.PI)) + 180) / 90) + 3) % 4;

return d;

function addClassTo(dom, e, state)\{

var d = getDirect(dom, e);

var direction = '';

switch(d)\{

case 0: \{

direction = '-top';

break;

case 1:\{

direction = '-right';

break;

case 2: \{

direction = '-bottom';

break;

case 3: \{

direction = '-left';

break;

default: break;

$(dom).attr('class', 'box ' + state + direction);

// return direction;

JS功能就是用来判断是进入还是出去，以及进入出去时所加的类名

var d = (Math.round(((Math.atan2(y, x) \* (180 / Math.PI)) + 180) / 90) + 3) % 4;其中这句是用来判断进入的方向（上下左右），就是将中心点移入到小方块的中心，然后对其角度计算取（0-4）其中这样计算后对4求余右边进入的方向为0，顺时针增大，而通过加3再对4求余，使得最上面进入为0，其余顺时针增大到3，因此判断出进入的方向性。

好啦，本次小demo就到此了，请好好理解一下。深入掌握CSS的3D变换

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N5Z19sMDI_size_16_color_FFFFFF_t_70]: /images/20220415/cafa742b81964d0ab783ab4fe6b475a9.png