css代码写3D盒子动画

完整代码见下：

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="data:images/1.jpg" alt="" /></div><div><img src="data:images/2.jpg" alt="" /></div><div><img src="data:images/3.jpg" alt="" /></div><div><img src="data:images/4.jpg" alt="" /></div><div><img src="data:images/5.jpg" alt="" /></div><div><img src="data:images/6.jpg" alt="" /></div><div><img src="data:images/1.jpg" alt="" /></div><div><img src="data:images/2.jpg" alt="" /></div><div><img src="data:images/3.jpg" alt="" /></div><div><img src="data:images/4.jpg" alt="" /></div><div><img src="data:images/5.jpg" alt="" /></div><div><img src="data: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);}
}

css代码写3D盒子动画相关推荐

如何用最简洁的css代码写一个导航栏
如何用最简洁的css代码写一个导航栏首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容. 注:标签主要是用于设置超链接. <div><img src= ...
用HTML+CSS代码写一个3D旋转相册
看到有些人好奇用css怎么写出3D旋转相册的效果. 这里说说一种方法. 首先看一下效果写出这样的效果可以使用css的transform3D的变换效果: 第一步写出主体注意:因为演示都是使用同一张背 ...
css 3D盒子动画
翻转盒子放在父容器中,触发动画的hover绑定在父容器上.否则,在360.搜狗等浏览器中,直接给3D盒子绑定hover,会出现抖动现象. 本例子中,div为盛放3D盒子的父容器,且设置perspect ...
html简单盒子代码,CSS3 3D盒子超简单制作
这是我第一次在这里写文章,如果写得不好的话,请大家多多包涵一下. 在XX网学完CSS3之后,然后我懂了一个道理,XX网评论区域存在一个小明梗,这个梗是这样的:1+1=2, 2+2=4,问小明今年多少岁 ...
CSS代码写一个网页，有留言板
可以这样写 CSS 代码来创建一个留言板: /* 定义留言板的外观 */ .message-board {width: 500px;height: 400px;background-color: #f ...
html如何有立体效果,一段CSS代码让div盒子有立体效果
先上效果图,再来代码: 上图是对一个336*280px大小的矩形进行了调整,给它增加了一个投影的效果,就好像它立了起来,有种立体的感觉,怎么做到的呢?其实也就是一段CSS的功夫.先确定下html结构, ...
html页面css代码写在哪里,html中css代码放哪里
在html中,css代码可以直接利用style属性,放到html标签中,语法"内容标签名>":也可以使用style标签把css代码集中写在HTML文档的head头部标签中. ...
CSS 空间转换3D和动画
空间转换3D 3D坐标系一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D位移完整写法 tr ...
Shader toy （顺手写两个Gyro）（纯代码写3D）
Shader toy (A new world) 1.一个多月了,突然忘记CSDN的password了.由于每次输password的时候都要计算一遍,于是没有计算出来- 2.回头发现都过了半年了,都快 ...

css代码写3D盒子动画

css代码写3D盒子动画相关推荐

最新文章

热门文章