Maison > interface Web > tutoriel CSS > Implémentation pure CSS3 du code d'effets spéciaux de rotation de cube 3D

Implémentation pure CSS3 du code d'effets spéciaux de rotation de cube 3D

零下一度
Libérer: 2017-05-17 17:36:09
original
3123 Les gens l'ont consulté

Dans le cours micro-professionnel front-end de NetEase, il y a un devoir parascolaire pour implémenter un cube rotatif 3D. Cela m'a pris du temps pour le faire, et c'était intéressant j'ai écrit un tutoriel simple pour que tout le monde puisse l'apprendre. Mettez d'abord l'effet final à obtenir.

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>

Copier après la connexion

【Recommandations associées】

1. Recommandation spéciale : Téléchargement de la version V0.1 de "php Programmer Toolbox"

2

Tutoriel vidéo en ligne CSS gratuit

3. 2)-tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal