css代码写3D盒子动画

最新推荐文章于 2023-10-06 10:55:50 发布
最新推荐文章于 2023-10-06 10:55:50 发布
阅读量1.2k 收藏 14
点赞数 3
分类专栏： css小动画 前端 文章标签： css 动画 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46249441/article/details/121949576
版权

完整代码见下：

html：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>HTML+CSS 3D盒子</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<section>
			<div><img src="images/1.jpg" alt="" /></div>
			<div><img src="images/2.jpg" alt="" /></div>
			<div><img src="images/3.jpg" alt="" /></div>
			<div><img src="images/4.jpg" alt="" /></div>
			<div><img src="images/5.jpg" alt="" /></div>
			<div><img src="images/6.jpg" alt="" /></div>
			<div><img src="images/1.jpg" alt="" /></div>
			<div><img src="images/2.jpg" alt="" /></div>
			<div><img src="images/3.jpg" alt="" /></div>
			<div><img src="images/4.jpg" alt="" /></div>
			<div><img src="images/5.jpg" alt="" /></div>
			<div><img src="images/6.jpg" alt="" /></div>
		</section>
	</body>
</html>

 css：

* {
	/* 初始化 取消页面的内外边距 */
	padding: 0;
	margin: 0;
}
body {
	/* 弹性布局 让页面元素垂直+水平居中 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 让页面始终占浏览器总高 */
	height: 100vh;
	background-color: #000;
	/* 视距 增加盒子的立体感 */
	perspective: 1000px;
}
section {
	/* 相对定位 */
	position: relative;
	width: 150px;
	height: 150px;
	/* 让子元素保留其3D位置 */
	transform-style: preserve-3d;
	/* 动画 名称 时长 linear 是匀速运动 infinite是无限次播放 */
	animation: rotate 5s linear infinite;
}
section div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	transition: all 1s;
}
section div img {
	width: 100%;
	height: 100%;
}
section div:nth-child(1) {
	transform: translateZ(75px);
}
section:hover div:nth-child(1) {
	transform: translateZ(200px);
}
section div:nth-child(2) {
	transform: rotateX(-180deg) translateZ(75px);
}
section:hover div:nth-child(2) {
	transform: rotateX(-180deg) translateZ(200px);
}
section div:nth-child(3) {
	transform: rotateX(90deg) translateZ(75px);
}
section:hover div:nth-child(3) {
	transform: rotateX(90deg) translateZ(200px);
}
section div:nth-child(4) {
	transform: rotateX(-90deg) translateZ(75px);
}
section:hover div:nth-child(4) {
	transform: rotateX(-90deg) translateZ(200px);
}
section div:nth-child(5) {
	transform: rotateY(90deg) translateZ(75px);
}
section:hover div:nth-child(5) {
	transform: rotateY(90deg) translateZ(200px);
}
section div:nth-child(6) {
	transform: rotateY(-90deg) translateZ(75px);
}
section:hover div:nth-child(6) {
	transform: rotateY(-90deg) translateZ(200px);
}
section div:nth-child(7) {
	transform: translateZ(75px);
}
section div:nth-child(8) {
	transform: rotateX(-180deg) translateZ(75px);
}
section div:nth-child(9) {
	transform: rotateX(90deg) translateZ(75px);
}
section div:nth-child(10) {
	transform: rotateX(-90deg) translateZ(75px);
}
section div:nth-child(11) {
	transform: rotateY(90deg) translateZ(75px);
}
section div:nth-child(12) {
	transform: rotateY(-90deg) translateZ(75px);
}

@keyframes rotate {
	0% {
		transform: rotateY(0) rotateX(0);
	}
	100% {
		transform: rotateY(360deg) rotateX(360deg);
	}
}

好大一个绿菠萝
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3小实例：开箱子动画
艾恩小灰灰的博客
12-02 685
实例：开箱子动画。技术栈：HTML+CSS。
html简单盒子代码,CSS3 3D盒子超简单制作
weixin_34334554的博客
06-09 2245
这是我第一次在这里写文章，如果写得不好的话，请大家多多包涵一下。在XX网学完CSS3之后，然后我懂了一个道理，XX网评论区域存在一个小明梗，这个梗是这样的：1+1=2, 2+2=4，问小明今年多少岁 = 。= 原因是XX网教的基础是非常的基础，一到实战就GG了。看完CCS3课程后，自己尝试手写一下3D盒子的切换，虽然不是很炫。但是为了来练练手，顺便检查一下自己的学习成果，写了一个超鸡简单的鼠标...
CSS:何制作一个向各个方向延展box?
09-27
http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/在HTML中, 如果过你没有指定一个确定的宽度的话, 块级元素本身就会在垂直方向上延展. 想象一个无序清单. 这个清单会自己扩展来适应它所有的清单元素. 如果用户在他们的浏览器中增加了字体大小, 清
CSS3之设计动态立体盒子
weixin_33712987的博客
09-15 109
CSS3设计3D效果图 使用到CSS3中的变形、缩放、倾斜。 只写了兼容Gecto的。发张图片鼓励自己 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&a
使用css制作3D盒子，目的是把盒子并列制作成3D货架
qq3892997的博客
10-06 823
3D盒子并列制作成3D货架
css3设计动态立体盒子,【CSS3练习】3D盒子制作
weixin_29243279的博客
08-03 771
先发个3D盒子最终效果图制作步骤1：创建基本结构分布把6个面定义到3×3的画布上，1和4暂且是重叠的。html结构比较简单：123456CSS部分：*{margin:0;padding:0;}.box{margin:50px auto; 300px;height: 300px; border:1px solid #ccc;position: relative;}.layer{background-...
CSS+JS实现3D盒子
暖风的博客_CSDN博客
03-24 362
1.首先必须对3d坐标足够熟悉，如下图 初始页面在xy所在页面，默认3d转换中心在图的中点。 2.我们需要构成6个页面，形成一个正方形，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" href="fk.PNG"> <title>css3D盒子</titl..
用css3 3d效果做一个立体盒子
Cat_LIKE_Mouse的博客
07-30 1435
想要做立方体的盒子 需要了解几个知识点 旋转 transform：rotate 基点的设置transform-origin 3d设置transform-style：preserve-3d 移动：transform：translat
超实用的CSS代码段
01-11
《超实用的CSS代码段》分为11章，包含文字、字体、边框、图片、按钮、链接、背景、颜色、动画、页面布局、美化、盒子、3D、CSS Hack等网页设计和交互技术，对那些客户要求高、工作节奏快的网站开发人员和设计人员...
前端领域，运用CSS3实现页面动态效果
最新发布
11-03
2D/3D 转换：CSS3 支持对元素进行 2D 和 3D 转换，包括旋转、缩放和倾斜等效果。这可以帮助开发者创建更复杂的动画和交互效果。 动画和过渡：CSS3 提供了两种新的动画和过渡效果，即 @keyframes 和 transition。这些...
css3 + js实现3D盒子，可用滚轮及拖拽调整视角3Dbox.html
05-17
css3 + js实现3D盒子，可用滚轮及拖拽调整视角
jQueryCSS3 3D旋转盒子动画 可自定义封面图片
12-23
jQueryCSS3 3D旋转盒子动画 可自定义封面图片，鼠标可拖拽，可以输入值来调节3D盒子大小，可以放上自己的朋友的照片或者自己喜欢的人的照片哦，非常美观，建议下载！
HTML带动态背景的3D立方体旋转相册源码.rar
07-23
3d相册旋转效果使用纯css属性及动画实现，相册整体分为两个div盒子，内层和外层，内层div较小因此对其中的图片使用css对图片保留原有比例进行裁切，将整体相册容器开启3d渲染环境，当鼠标移入时外层div使用css对立方...
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...
html5-3D音乐盒
09-08
一个简单好看的3d音乐盒子，旋转的立方体，配合一些css3的动画和过渡变换属性。 希望能给大家一些参考
那些年我们用css3实现的打开盒子的3d动画
车联网开发的博客
12-01 2212
本片博客意在练习使用css3的新增特性实现一些炫酷的特效 特效如图 代码如下 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"
css3实现3D盒子
LC的博客
05-18 593
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0;margin:0;} html,body{height: 1...
HTML + CSS 实现炫彩 3d 盒子
qq_43477721的博客
04-23 1202
B站地址https://www.bilibili.com/video/BV1jC4y14739?from=search&seid=14906173926344311066 看完之后，总有一种自己 CSS 白学的感觉，太卑微了，向大佬低头???????????????????????????????? 下面的评论有链接，里面有素材，（真是太贴心了） <!DOCTYPE html> <html lang="en">...
CSS3实现3D盒子效果
weixin_30595035的博客
12-17 271
近日，看到了css3中，设计动态立体盒子的例子，觉得比较新奇，所以研究了下，加以自己的拙见，设计了如图所示的例子，拿来给大家分享：（此图为Firefox下的截图） 这跟“3D盒子”的实现方式一样，我的盒子也是以它为原型来设计的。 整个盒子的HTML结构很简单，如下： <div class=”cube”> <div class=”backface”>后</d...
css动画划过盒子动画
05-22
可以通过CSS中的:hover伪类和transition属性来实现划过盒子动画。以下是一个简单的示例： HTML代码： ``` <div class="box"></div> ``` CSS代码： ``` .box { width: 100px; height: 100px; background-color: blue; transition: transform 0.3s ease; } .box:hover { transform: scale(1.2); } ``` 解释一下上面的代码： - 首先，我们创建了一个宽度和高度都为100像素的蓝色盒子。 - 接着，我们使用transition属性来定义我们希望在鼠标划过时应用的变换动画。这里我们使用transform属性来缩放盒子，时间为0.3秒，缓动函数为ease。 - 最后，我们使用:hover伪类选择器来指定当鼠标划过盒子时应用的样式。在本例中，我们将transform属性设置为放大盒子1.2倍，从而创建一个简单的划过盒子动画。 当用户将鼠标悬停在盒子上时，它将以动画形式放大1.2倍。你可以根据自己的需要调整动画效果，例如更改变换属性或持续时间等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值