第102天：CSS3实现立方体旋转

CSS3实现立方体旋转

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>立方体旋转</title>
 6     <style>
 7         .box{ 8             width: 250px;
 9             height: 250px;
10             border: 1px dashed red;
11             margin:100px auto;
12             position: relative;
13             transform-style: preserve-3d;
14             border-radius: 50%;
15             /*transform: rotateX(30deg) rotateY(-30deg);*/
16
17             animation: gun 8s linear infinite;
18         }
19         .box>div{20             width: 100%;
21             height: 100%;
22             position: absolute;
23             text-align: center;
24             line-height: 250px;
25             font-size: 60px;
26             color: green;
27         }
28         .left{29             background-color: rgba(255,0,0,0.3);
30             /*变换中心*/
31             transform-origin: left;
32             /*变换*/
33             transform:rotateY(90deg) translateX(-125px);
34         }
35         .right{36             background-color: rgba(0,0,255,0.3);
37             transform-origin: right;
38             transform: rotateY(90deg) translateX(125px);
39         }
40         .forward{41             background-color: rgba(0,255,255,0.3);
42             transform: translateZ(125px);
43         }
44         .back{45             background-color: rgba(255,255,0,0.3);
46             transform: translateZ(-125px);
47         }
48         .up{49             background-color: rgba(99,66,33,0.3);
50             transform: rotateX(90deg) translateZ(125px);
51         }
52         .down{53             background-color: rgba(255,0,255,0.3);
54             transform: rotateX(-90deg) translateZ(125px);
55         }
56         @keyframes gun {57             0%{
58                 transform: rotateX(0deg) rotateY(0deg);
59             }
60             100%{61                 transform: rotateX(360deg) rotateY(360deg);
62             }
63         }
64     </style>
65 </head>
66 <body>
67     <div class="box">
68         <div class="up">上</div>
69         <div class="down">下</div>
70         <div class="left">左</div>
71         <div class="right">右</div>
72         <div class="forward">前</div>
73         <div class="back">后</div>
74     </div>
75 </body>
76 </html>

运行效果：

第102天：CSS3实现立方体旋转相关推荐

html立方体旋转展开,css3技术设计立方体旋转发光效果动图
CSS3 3D立方体旋转发光动画特效 body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background: #222 ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
java3D实现空间立方体,纯CSS3实现一个旋转的3D立方体盒子
简单介绍上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果注:代码在chrome 43.0.2357 ...
html鼠标互动旋转立方体,css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍...
本文通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3D立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴 ...
html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效
这是一款js和CSS3 3D立方体图片画廊特效.该3D立方体图片画廊特效通过CSS3进行布局,构建立方体,然后通过简单的js代码来完成点击缩略图进行立方体旋转的操作. 由于该该3D立方体图片画廊特效中 ...
图片3d立方体旋转html代码,超酷3D立方体空间旋转图片画廊特效
这是一款效果非常炫酷的CSS3 3D立方体空间旋转图片画廊特效.该特效实际是一个3D立方体,在其内部显示图片.在点击立方体每一面的图片时,这张图片就会放大到屏幕的中间,效果非常的酷. 因为IE浏览器不 ...
制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
利用CSS3做出立方体
CSS3之立方体要想利用css3做出立方体,首先我们应该先想象以下立方体的构造,见下图: 立方体是由六个面组成,分上下左右和前后,考虑这些可以助我们更好的融入css3的代码接下来就是要写代 ...
HTML5——3D立方体旋转动画
效果图: 代码如下: <!DOCTYPE html> <html> <head><meta charset="UTF-8">< ...
css对称旋转,CSS3 transform平面旋转
CSS3 transform平面旋转 1.translate(x,y) 设置盒子位移 2.scale(x,y) 设置盒子缩放 3.rotate(deg) 设置盒子旋转 4.skew(x-angle,y ...

第102天：CSS3实现立方体旋转

第102天：CSS3实现立方体旋转相关推荐

最新文章

热门文章