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 class="block-in"/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翻转效果。
推荐：《css视频教程》以上是css如何实现翻转效果的细节。请多关注php中文网站的其他相关文章！
来源：php中文网站
关键词：
