Rumah > hujung hadapan web > tutorial css > 纯css3实现3D立方体旋转特效代码

纯css3实现3D立方体旋转特效代码

零下一度
Lepaskan: 2017-05-17 17:36:09
asal
3122 orang telah melayarinya

上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体,花了点时间做了下,还有点意思,写个简单教程,供大家学习。 先放上最终要实现的效果 .

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

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<!DOCTYPE html>

<html lang="en"><head><meta charset="UTF-8"><title>CSS3 3D立方体多边形动画特效 - 代码笔记</title><style type="text/css">*{

 margin:0 auto;

    padding:0;

}

@keyframes rotate{

    0%{

        transform:rotateX(0deg) rotateY(0deg);

    }

    100%{

        transform:rotateX(360deg) rotateY(360deg);

    }

}

html{

    background:linear-gradient(#ff0 0%, #000 80%);

    height:100%;

}

.wrap{

    margin-top:200px;

    perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */

}

.cube{

    width:200px;

    height:200px;

    position:relative;

    color:#fff;

    font-size:36px;

    font-weight:bold;

    text-align:center;

    line-height:200px;

    transform-style:preserve-3d; /* 默认flat 2D */

    transform:rotateX(-30deg) rotateY(-70deg);

    animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */

}

.cube > div{

    width:100%;

    height:100%;

    border:1px solid #fff;

    position:absolute;

    background-color:#333;

    opacity:.6;

    transition:transform 0.4s ease-in;

}

.cube .out-front{

    transform: translateZ(100px);

}

.cube .out-back{

    transform: translateZ(-100px) rotateY(180deg);

}

.cube .out-left{

    transform: translateX(-100px) rotateY(-90deg);

}

.cube .out-right{

    transform: translateX(100px) rotateY(90deg);

}

.cube .out-top{

    transform: translateY(-100px) rotateX(90deg);

}

.cube .out-bottom{

    transform: translateY(100px) rotateX(-90deg);

}

.cube > span{

    display:block;

    width:100px;

    height:100px;

    border:1px solid black;

    background-color:#999;

    position:absolute;

    top:50px;

    left:50px;

}

.cube .in-front{

    transform: translateZ(50px);

}

.cube .in-back{

    transform: translateZ(-50px) rotateY(180deg);

}

.cube .in-left{

    transform: translateX(-50px) rotateY(-90deg);

}

.cube .in-right{

    transform: translateX(50px) rotateY(90deg);

}

.cube .in-top{

    transform: translateY(-50px) rotateX(90deg);

}

.cube .in-bottom{

    transform: translateY(50px) rotateX(-90deg);

}

.wrap:hover .out-front{

    transform: translateZ(200px);

}

.wrap:hover .out-back{

    transform: translateZ(-200px) rotateY(180deg);

}

.wrap:hover .out-left{

    transform: translateX(-200px) rotateY(-90deg);

}

.wrap:hover .out-right{

    transform: translateX(200px) rotateY(90deg);

}

.wrap:hover .out-top{

    transform: translateY(-200px) rotateX(90deg);

}

.wrap:hover .out-bottom{

    transform: translateY(200px) rotateX(-90deg);

}

  

</style>

</head>

<body>

<div class="wrap">

    <div class="cube">

        <div class="out-front">前面</div>

        <div class="out-back">后面</div>

        <div class="out-left">左面</div>

        <div class="out-right">右面</div>

        <div class="out-top">上面</div>

        <div class="out-bottom">下面</div>

  

        <span class="in-front"></span>

        <span class="in-back"></span>

        <span class="in-left"></span>

        <span class="in-right"></span>

        <span class="in-top"></span>

        <span class="in-bottom"></span>

    </div>

</div>

  

<div style="text-align:center;margin:50px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;">

<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>

</div>

</body>

</html>

Salin selepas log masuk

【相关推荐】

1. 特别推荐“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱(2)-css视频教程

Atas ialah kandungan terperinci 纯css3实现3D立方体旋转特效代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan