这是用css3做出来的一个小小的特效,最主要运用的是css3中transfrom的用法。
思路:1:首先外部有一个heard的大盒子,用来包裹里面的照片盒子cube,将其设置transform-style:preserve-3d;(设置3d环境),并且使其旋转,以便看到cube的3d效果。
2:cube盒子也设置为3d环境
3:cube里面的img分别用一个div包裹,分别做cube的6个面,
分别对其设置transform属性,将其位置调到cube的6个面上。
4:创建包裹cube的心型。它是由36个大小与heard盒子相同的盒子构成,其中每一个盒子都去掉border-left,border-bottom,设置border-radius: 50% 50% 0/ 40% 50% 0;使其形状变成半个爱心形状。由于心型由36个盒子通过旋转构成的,采用js循环创建每一个盒子,并为其设置 line.style.transform = " rotateY("+ i * 10 +"deg) rotateZ(4时5deg) translateX(150px) ,让每一个盒子随着i的增加,绕Y轴旋转的角度也随之增加10deg
5:为heard设置animation(动画)使其达到3D旋转效果。关键帧如下:
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
100%{
transform: rotateY(720deg) rotateX(360deg) rotate(360deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
img{
width: 200px;
height: 200px;
}
body{
background-color: #000;
/* 景深 */
perspective: 1000px;
}
#heard {
width: 300px;
height: 600px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
/* 使其旋转看到cube的立体效果 */
transform: rotateX(15deg) rotateZ(40deg);
animation: rotate 10s linear infinite;
}
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
100%{
transform: rotateY(720deg) rotateX(360deg) rotate(360deg);
}
}
.cube{
width: 200px;
height: 200px;
position: absolute;
top:0px;
left: 0px;
transform-origin: 50% 50% ;
/* 设置3D环境 */
transform-style: preserve-3d;
/* 移动元素 */
transform: translateX(60px) translateY(300px) translateZ(60px);
}
.cube>div{
width: 100%;
height: 100%;
position: absolute;
top:0px;
left: 0px;
border: 1px solid #000;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right{
transform: translateX(100px) rotateY(90deg);
}
.top{
transform: translateY(100px) rotateX(90deg);
}
.bottom{
transform: translateY(-100px) rotateX(-90deg);
}
/*爱心的连边框*/
.line {
width: 300px;
height: 600px;
position: absolute;
top:0;
left: 0;
border: 3px solid #e4393c;
border-left:0;
border-bottom: 0;
border-radius: 50% 50% 0/ 40% 50% 0;
}
</style>
</head>
<body>
<div id="heard">
<div class="cube">
<div class="front">
<img src="images/195879243088111386.jpg" alt="">
</div>
<div class="back">
<img src="images/269640817264076902.jpg" alt="">
</div>
<div class="left">
<img src="images/433009550641076123.jpg" alt="">
</div>
<div class="right">
<img src="images/440631776022353177.jpg" alt="">
</div>
<div class="top">
<img src="images/514592520347249911.jpg" alt="">
</div>
<div class="bottom">
<img src="images/895994212257750117.jpg" alt="">
</div>
</div>
<!-- <div class="heard"></div> -->
</div>
</body>
</html>
<script>
//获取元素
var heard = document.getElementById("heard");
for(var i = 0; i < 36 ;i++)
{
var line = document.createElement("div");
line.className = "line";
line.style.transform = " rotateY("+ i * 10 +"deg) rotateZ(45deg) translateX(150px) ";
heard.appendChild(line);
}
</script>