<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D爱心</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: black;
perspective: 1000px;
}
#heart3d {
width: 100px;
height: 160px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
/*设置为3D环境*/
/*自定义动画:名称,时间,匀速,无限循环*/
animation: rot 3s linear infinite;
}
@keyframes rot {
from {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
to {
transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
}
}
#heart3d div.heart {
width: 100px;
height: 160px;
border: 2px solid red;
border-left: 0;
border-bottom: 0;
/*border-radius有8个值,前四个是水平方向,后面四个是数值方向*/
border-radius: 50% 50% 0/40% 50% 0;
position: absolute;
top: 0;
}
#cube {
width: 50px;
height: 50px;
position: relative;
transform-style: preserve-3d;
/*设置为3D环境*/
transform: translateX(25px) translateY(50px) translateZ(25px);
}
#cube div {
width: 50px;
height: 50px;
position: absolute;
left: 0;
top: 0;
color: red;
}
#cube div:nth-child(1) {
/*CSS3结构伪类和那:nth-of-type效果相似*/
top: -50px;
/*旋转中心,X,Y,Z*/
transform-origin: bottom;
/*CSS3变换,围绕X轴旋转*/
transform: rotateX(90deg);
}
#cube div:nth-child(2) {
top: 50px;
transform-origin: top;
/*CSS3变换,围绕X轴旋转*/
transform: rotateX(-90deg);
}
#cube div:nth-child(3) {
left: -50px;
transform-origin: right;
/*CSS3变换,围绕X轴旋转*/
transform: rotateY(-90deg);
}
#cube div:nth-child(4) {
left: 50px;
transform-origin: left;
/*CSS3变换,围绕X轴旋转*/
transform: rotateY(90deg);
}
#cube div:nth-child(5) {}
#cube div:nth-child(6) {
transform: translateZ(-50px);
}
</style>
</head>
<body>
<div id="heart3d">
<div id="cube">
<div><img src="img/1.jpg" style="width: 50px; height: 50px;" /></div>
<div><img src="img/2.jpg" style="width: 50px; height: 50px;" /></div>
<div><img src="img/3.jpg" style="width: 50px; height: 50px;" /></div>
<div><img src="img/4.jpg" style="width: 50px; height: 50px;" /></div>
<div><img src="img/5.jpg" style="width: 50px; height: 50px;" /></div>
<div><img src="img/6.jpg" style="width: 50px; height: 50px;" /></div>
</div>
</div>
<script type="text/javascript">
var heart3d = document.getElementById("heart3d");
for(var i = 0; i < 36; i++) {
/*创建子元素*/
var oDiv = document.createElement("div");
/*添加类名*/
oDiv.className = "heart";
oDiv.style.transform = "rotateY(" + i * 10 + "deg)rotateZ(45deg) translateX(30px)";
/*添加子元素*/
heart3d.appendChild(oDiv);
}
</script>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200528091432123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1OTY5NQ==,size_16,color_FFFFFF,t_70)
HTML+CSS前端表白代码
最新推荐文章于 2024-06-26 17:21:08 发布