2022年02月16日发布css怎么实现翻转效果

大家好，今日小科来聊聊一篇关于2022年02月16日整理发布：css怎么实现翻转效果的文章，现在让我们往下看看吧！

css翻转效果的实现方法：首先创建一个演示框，并为其添加过渡和变换属性；然后给需要翻转的p加上转场属性；最后，只需添加透视图和转换样式的属性。

本文的运行环境：Windows7系统，HTML5CSS3版本3，DELL G3电脑

作为前端开发人员的必修课，CSS3可以帮助我们完成很多基本的动态效果。本期我们就用CSS3来实现悬停效果~

第一步非常简单。让我们简单地画一个演示框，并向它添加过渡和变换属性：

//此示例使用Sass语法。区块{

宽度： 200 px；

height: 200px

背景：棕色；

cursor:指针；

transition: 0.8s

:悬停{

变压器：旋转角度(180度)；

}

}我们来看看此时的效果：

这里应该注意的是，应该写入转换属性。格挡代替悬停。如果悬停时只写过渡，鼠标移出时就没有过渡效果了。如果我们只写悬停时的过渡：

第二步更关键：不难发现，它总是在一个平面上转，不够立体，需要我们稍微改变一下思路。——嵌套了两层p。

//html部分

div class='block '

div /div

/div//CSS部分。区块{

宽度： 200 px；

height: 200px

cursor:指针；

-在{

背景：棕色；

身高： 100%；

transition: 0.8s

}

:盘旋。闭塞{

变压器：旋转角度(180度)；

}

}此时效果没有变化，如下：

这是关键的一步：我们需要在外层添加透视和变换风格的属性，为整个动画添加3D变形效果：区块{

宽度： 200 px；

height: 200px

cursor:指针；

/* 3D变形*/

transform-style : preserve-3d；

-WebKit-perspective : 1000；

-moz-透视： 1000；

-ms-perspective : 1000；

perspective: 1000

-在{

背景：棕色；

身高： 100%；

transition: 0.8s

}

:盘旋。闭塞{

变压器：旋转角度(180度)；

}

}最终效果如下：

最后，我们总结一下思路：

1.建立内层和外层p，当鼠标悬停在外层时，将反变换： rotateY(180deg)添加到内层p。

2.注意要给需要翻转的p加上转场属性，而不是悬停。

3.在外层P加入透视和变换风格的属性，最终实现3D翻转效果。

这篇好文章是转载于：知行礼动