开发者社区> 半指温柔乐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: CSS3实现立方体旋转 1 DOCTYPE html> 2 3 4 5 立方体旋转 6 7 .box{ 8 width: 250px; 9 height: 250px; 10 ...
+关注继续查看

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>

运行效果:

 

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML之文本格式化、链接、头部、CSS(笔记小结)
HTML之文本格式化、链接、头部、CSS(笔记小结)
0 0
【前端】css布局html页面之inline-block布局错位解决方法
本篇文章中,主要讲讲前端布局的情况 对于,对于刚接触前端开发的小伙伴来说,布局是一个比较重要的知识点,如果知识点理解不到位,那么很容易出现布局错位的情况
0 0
通过DOM对HTML文档的元素内容和CSS样式进行操作
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
0 0
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
0 0
用HTML+CSS构建一个绚丽的登录页面
自动切换背景,登录页面,水滴效果,绚丽的登录页面
0 0
HTML+CSS实现商品介绍模考(以Apple14为案例)
本文以最通俗易懂的语言为读者提供一个经典CSS小案例,商品介绍模块,并且结合时事,以Apple14为案例进行讲解。
0 0
实训-利用HTML+CSS制作某米官网首页(二)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS制作某米官网首页(一)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS做响应式项目网页
实训-利用HTML+CSS做响应式项目网页
0 0
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效,比如百叶窗效果,本文我们就用HTML+CSS制作一个百叶窗小项目,适合刚学前端的小伙伴,使用代码简单易懂,很容易上手,学习完本文后,相信你也能敲出来属于自己的百叶窗效果,改变图片及相应盒子的大小,有女朋友的可以试着放几张在一起的照片,也是一件非常浪漫的事
0 0
+关注
半指温柔乐
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载