html翻转效果怎么实现


本文摘自PHP中文网,作者藏色散人,侵删。

html翻转效果的实现方法:首先将两个要展示的图片利用定位重叠在一起;然后利用CSS3的perspective结合“transform:ratateY()”属性实现翻转效果即可。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

CSS3实现漂亮的卡片翻转效果

先贴效果图(实际效果比gif图流畅1000倍,放心使用):
这里写图片描述
主要利用的CSS3的perspective结合transform:ratateY()属性完成。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。需要注意的是:perspective 属性只影响 3D 转换元素。
这个属性现在在火狐谷歌safari上都得到了较好的支持,W3C.cn上关于该属性的说明还未及时更新。

实现思路就是将两个要展示的p利用定位重叠在一起,其中一个首先围绕Y轴旋转一定角度,还要加上一个关键属性backface-visibility:hidden (该属性定义当元素不面向屏幕时是否可见)。如果不加上这个属性的话,那么就会始终只能看到一张卡片了,失败的效果如下:
这里写图片描述
下面就贴完整的代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="utf-8">

        <meta http-equiv="Content-Type" content="text/html">

        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

        <title>CSS3实现卡片翻转效果</title>

        <style>

            .re-item {

                width: 220px;

                margin: 50px auto;

                height: 276px;

                cursor: pointer;

                position: relative;

                perspective: 500;

                -webkit-perspective: 500;

            }

 

            .re-item img {

                max-width: 220px;

            }

 

            .re-item-front,

            .re-item-back {

                position: absolute;

                top: 0;

                left: 0;

                width: 100%;

                height: 100%;

                background-color: #fff;

                -webkit-perspective: 1000;

                /*backface-visibility: hidden;*/

                -webkit-transition: all 1.5s;

                -moz-transition: all 1.5s;

                -ms-transition: all 1.5s;

                -o-transition: all 1.5s;

                box-shadow: rgba(50, 50, 50, 0.2) 0 0 15px;

                overflow: hidden;

            }

 

            .re-item-back {

                position: relative;

                transform: rotateY(-180deg);

                -webkit-transform: rotateY(-180deg);

            }

 

            .re-item:hover .re-item-front {

                transform: rotateY(-180deg);

                -webkit-transform: rotateY(-180deg);

            }

 

            .re-item:hover .re-item-back {

                transform: rotateY(-360deg);

                -webkit-transform: rotateY(-360deg);

            }

 

            .re-box .re-item dd {

                text-align: center;

                font-family: "微软雅黑";

            }

 

            .re-item .re-item-job {

                margin: 2px 0;

                font-size: 18px;

                color: #303030;

                line-height: 40px;

            }

 

            .re-item .re-item-des {

                padding: 0 12px;

                font-size: 14px;

                color: #939393;

            }

        </style>

    </head>

 

    <body>

        <div class="re-box">

            <div class="re-item">

                <dl class="re-item-front">

                    <dt><img src="img/c2.jpg" / alt="coser"></dt>

                    <dd class="re-item-job">coser</dd>

                    <dd class="re-item-des">成为我们的合作coser,漫展返图,自由扩列,以及无偿拍摄&后期服务</dd>

                </dl>

 

                <div class="re-item-back">

                    <img src="img/c2_1.jpg" alt="苏苏" />

                    <button type="button" class="join_btn open_modal" data-id="2">立即加入</button>

                </div>

            </div>

        </div>

    </body>

 

</html>

好好看看html结构,很多都是不需要的,最关键的结构如下,css你也看着删除一下吧。

阅读剩余部分

相关阅读 >>

Html怎么进行页面跳转(重定向)

css实现页面底部固定的方法介绍(附代码)

jsp和Html的区别有哪些

Html 速查列表

Html文本框怎么设置大小

Html怎么设置表格线的颜色

Html中circle是什么意思

如何使用Html的title属性

Html style标签是什么意思?关于style标签的使用方法详解

xHtmlHtml之间有什么区别?xHtmlHtml之间的异同分析

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...