博客园右侧魔方代码

?
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<div class="wrap">
    <!--部署内外层图片-->
    <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_1.jpg" class="pic">
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_2.jpg" class="pic">
        </div>
        <!--左面图片 -->
        <div class="out_left">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_3.jpg" class="pic">
        </div>
        <!--右面图片 -->
        <div class="out_right">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_4.jpg" class="pic">
        </div>
        <!--上面图片 -->
        <div class="out_top">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_5.jpg" class="pic">
        </div>
        <!--下面图片 -->
        <div class="out_bottom">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_6.jpg" class="pic">
        </div>
  
        <!--小正方体 -->
        <span class="in_front">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_8.jpg" class="in_pic">
            </span>
        <span class="in_back">
                 <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_9.jpg" class="in_pic">
            </span>
        <span class="in_left">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_10.jpg" class="in_pic">
            </span>
        <span class="in_right">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_11.jpg" class="in_pic">
            </span>
        <span class="in_top">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_12.jpg" class="in_pic">
            </span>
        <span class="in_bottom">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_7.jpg" class="in_pic">
            </span>
    </div>
 
    <style>
        /*最外层容器样式*/
        .wrap {
            width: 100px;
            height: 100px;
            margin: 150px;
            position: relative;
        }
  
        /*得到立方体效果*/
        .cube {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;
            /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
            animation: rotate linear 20s infinite;
        }
  
        /*动画旋转的方式*/
        /*得到动画效果*/
        @-moz-keyframes rotate {                     /*firefox*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        @-webkit-keyframes rotate {                /*sofari chrome*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        @-o-keyframes rotate {                    /*opera*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        /*每张图片的样式*/
        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            /*过渡效果*/
            transition: all .4s;
        }
  
        /*定义所有图片样式*/
        .pic {
            width: 200px;
            height: 200px;
        }
  
        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }
  
        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }
  
        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }
  
        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
  
        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
  
        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
  
        /*定义小正方体样式*/
        .cube span {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
  
        .cube .in_pic {
            width: 100px;
            height: 100px;
        }
  
        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }
  
        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }
  
        .cube .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }
  
        .cube .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }
  
        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }
  
        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }
  
        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }
  
        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }
  
        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }
  
        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }
  
        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }
  
        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
 
  </div>

　　

posted @   brady-wang  阅读(395)  评论(1)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
历史上的今天：
2016-10-27 git 推送
2016-10-27 Laravel教程 七：表单验证 Validation
2016-10-27 Laravel教程 八：queryScope 和 setAttribute
2016-10-27 Laravel教程 六：表单 Forms
2016-10-27 Laravel教程 四：数据库和Eloquent
2016-10-27 Laravel教程 五：MVC的基本流程
2016-10-27 Laravel教程 三：视图变量传递和Blade
点击右上角即可分享
微信分享提示
SQL AI 助手