我的第一个博客

最新推荐文章于 2023-07-13 17:39:41 发布
最新推荐文章于 2023-07-13 17:39:41 发布
阅读量47 收藏
点赞数
分类专栏： CSS3 文章标签： CSS3 立方体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40103002/article/details/103246632
版权

通过CSS制作一个3d的立方体

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3制作3D立方体</title>
<style>
* {
	margin: 0;
	padding: 0;
}

body {
	width:500px;
	height:500px;
	perspective: 1500px;
	margin: 200px auto;
	border:1px solid pink;
}

.warp {
	width: 500px;
	height: 500px;
	margin: 100px auto;	
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(45deg) rotateY(45deg);
	height: 200px;
	border: 2px solid #ccc;
	text-align: center;
	animation: play 5s linear infinite;
}

.box {
	width: 200px;
	line-height: 200px;
	font-size: 150px;
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 150px;
	left: 150px;
}

.box1 {
	background: rgba(135,135,135,.3);
	transform: rotateY(90deg) translateZ(100px);
}

.box2 {
	background: rgba(135,0,255,.3);
	transform: rotateY(90deg) translateZ(-100px);
}

.box3 {
	background: rgba(255,125,125,.3);
	transform: rotateX(90deg) translateZ(-100px);
}

.box4 {
	background: rgba(125,255,125,.3);
	transform: rotateX(90deg) translateZ(100px);
}

.box5 {
	background: rgba(30,150,189,.3);
	transform: translateZ(100px);
}

.box6 {
	background: rgba(169,150,189,.3);
	transform: translateZ(-100px);
}

@keyframes play {
	from{ transform: rotateX(0) rotateY(0) rotateZ(0);}
	to {transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg);}
}
</style>
</head>
<body>
<div class="warp">
	<div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
</div>
<script>
</script>
</body>
</html>
qq_40103002
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSDN第一篇博客
u010700726的博客
02-16 2054
CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CSDN第一篇博客CS...
myfirstblog:我的第一个博客
05-31
在“myfirstblog:我的第一个博客”项目中，我们看到一个初学者正在探索网页开发的世界，特别是使用HTML（超文本标记语言）来创建他们的第一个博客。HTML是互联网的基础，用于构建网页结构，它是Web开发的基本语言，...
我的第一篇CSDN博客
sky4403的博客
02-14 9105
我的第一篇CSDN博客，记录、分享自己的学习和工作感想，在这里建立起自己的技术天地。虽然来得晚，但 Better later than never ！
我的第一篇博客文章
m0_68662723的博客
07-13 1万+
开启编程之旅！！！
我的第一个博客！！！
pandaggggg的博客
03-01 6063
3月1号 我的私人博客 这是我的私人博客，第一次写。 看到程序胖的视频，我想是时候下定决心养成一个新的好习惯了。 2021年的3月 也是我新的开始，毕业后8个月了，一路走到了今天，拿到了微软的校招sp offer。 不知道之后的路会是什么样子的，但是我觉得至少不会是迷茫的，于是决定记录下来，虽然也不知道分享给谁看，但是这个好习惯我会试着去坚持下去的。 这里也试试markdown的一些新功能吧。 双## 号是标题 图片拖拽也很好用呢。 附带一张我最喜欢的图片。 剩下的功能应该一时半会也用不太到，博客写的简单易
我的第一篇博客
清风彬的博客
03-26 3282
我的第一篇博客 第一篇博客，特此记录一下，嘻嘻~ 我是一个C语言初学者，可能对在座的高手来说我就是一个IT小白，但是我不会永远都是小白，或许在下个周、下个月，我会让在座的各位刮目相看。 此刻，距离我注册博客已经几个月了，有时候会看看一些IT高手发表的文章，觉得非常厉害。人人都希望自己变得厉害，我亦是如此。那么，写博客将是我不断学习进步的开始，这是一个好的习惯，就像写日记一样，记录下自己点滴成长轨迹...
我的第一张博客
烟花散尽的专栏
01-07 5675
今天突然想到我还有博客没有写。今天很高兴，因为我开始了自己人生的第一步的技术博客的写作。第一次我不知道该写什么好。所以在这里就随便写写自己的感想。我想自己以后可以做一个IT精英，在计算机领域里面我也可以做到家喻户晓。这样说当然有点夸张了啊。但是希望总是应该想的远大 一些的。对自己的人生规划也没有太大的规划。首先我得好好学好自己目前的C++。在C++里面我有自己的一套思维。我自己觉得我可以好好的学好
超详细图解：如何使用 WordPress搭建一个个人博客？
热门推荐
王炳明
10-15 5万+
前两天我用WordPress 给自己搭建了一个网站，整个过程非常的顺利，体验非常地好，于是我就整个过程、以及其中的一些搭建心得，记录下来。 如果你也正好有搭建个人网站的想法，那么本文会给你一个参考，也许看了这篇文章你就可以不用再百度、甚至谷歌了，因为我会写得 足够的细致而系统。 1. 写在前面 说到网站，其实我搭建过挺多个了。 从最开始的 Hexo 静态博客，到后来使用 Django 仿照 Hexo -Next 主题自己写了一个有后端的个人博客。 再后来又发现了 Sphinx + Github + Rea
2020年最新版CSDN博客排名第一名的博客
互联网老辛
07-09 1万+
文章目录前言csdn博客排名榜1. CSDN排名第一名的博主2. csdn 排名第二名的博主3. csdn排名第三名的博主4. csdn排名第四名的博主感悟总结 前言 写csdn这么久，不知道你有没有想过CSDN第一名的博客到底是谁。我也一直想知道CSDN排名第一的博客究竟何许人也。 研究了很久，我发现这个csdn排名第一的人每天都有变化，但始终是那几个人在前面。今天我们就来聊聊如何把csdn的排名做上去。 csdn博客排名榜 1. CSDN排名第一名的博主 博客链接： https://blog.csdn
我坚持在 CSDN 写了一年的博客，起飞了吗！？（复盘拿到的奖品）
小林coding
07-04 3万+
大家好，我是小林哥。 光阴似箭，不知不觉坚持写技术文章也有一年多了，没想到当初小小的决定，以及每周小小的坚持，给我带来了质的变化。 不仅仅对技术有了更深刻的理解，还给扩大了我的人脉，相识了很多优秀的博主，也帮助了很多同学解惑了枯燥乏味的计算机基础（是我的荣幸哈哈～） 当我越写越久发现，文章是能带来复利效应的，因为一篇文章是可以多次参与不同博客平台的活动，也就是说文章是可以反复复用的，即使是一个新出来的博客平台，你依然可以拿往期的文章去参与活动。 我写作一年多了，期间在很多博客平台拿到不少奖品，这次就来盘一盘
我的第一个博客系统blog.zip
04-29
【博客个人资源】 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、...
我的第一个Django博客
02-21
【标题】"我的第一个Django博客" 在编程世界中，创建个人博客是学习新技能、展示成果和分享知识的常见方式。在这个项目中，我们将深入探讨如何使用Python的Web框架Django来构建一个功能完备的博客系统。Django以其...
博客：我的第一个博客创建
02-16
我的第一个博客 <!-- 导航菜单在这里 --> <!-- 博客文章内容在这里 --> <!-- 页脚内容在这里 --> ``` 为了添加文章，你需要在`<article>`标签内添加相应的HTML元素，包括标题、作者、...
我的第一博客
02-11
【标题】"我的第一博客"通常指的是初学者创建的第一个个人博客项目，这通常是学习编程，尤其是Python语言的一个常见练习。这个项目可能包含了学习者在Web开发领域的初步尝试，包括搭建个人博客网站的基本结构、设计...
数理方法习题 前六章.pdf
08-03
数理方法习题 前六章
某大型制造企业IT蓝图规划及实施路线.pptx
08-03
某大型制造企业IT蓝图规划及实施路线.pptx
基于Springboot和Vue的社区团购系统设计源码 社区团购系统设计代码（98分期末优秀大作业）
08-03
社区团购系统设计源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
去哪儿旅游&小红书-旅行行业：2023五一旅行趋势报告—想出去玩.pdf
最新发布
08-03
去哪儿旅游&小红书-旅行行业：2023五一旅行趋势报告—想出去玩
帮我写一个个人博客页面
04-14
3. 写出您的第一篇博客，并不断更新； 4. 设置博客的 SEO，以便更好的被搜索引擎收录； 5. 在博客中增加一些多媒体内容，如图片、视频等； 6. 与其他博主建立联系，互相评论和推荐。 以上只是一些基础的建议，希望...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值