foreword
Nowadays, webpages are getting closer and closer to animation. I believe that everyone can see some animation effects more or less when browsing the webpage. Today we will make an interesting animation effect, using css3 to achieve a cube album with 3D effects. Let’s take a look together see.
Implementation ideas
- First of all, we need to determine a
htmlgood structure and the tags to be used; - When we
htmlbuild the structure, we have to think about how to achieve the three-dimensional effect; - Finally, how to achieve the effect of rotation and transformation when the mouse is touched.
html layout
<div class="parentBox">
<div class="contantBox">
<div class="outerBox">
<!--======================= 外部正方体 =======================-->
<!-- 外前图 -->
<div class="frontImgBox"><img src="../assets/tu1.jpg" /></div>
<!-- 外后图 -->
<div class="queenImgBox"><img src="../assets/tu2.jpg" /></div>
<!-- 外左图 -->
<div class="liftImgBox"><img src="../assets/tu3.jpg" /></div>
<!-- 外右图 -->
<div class="rightImgBox"><img src="../assets/tu4.jpg" /></div>
<!-- 外上图 -->
<div class="topImgBox"><img src="../assets/tu5.jpg" /></div>
<!-- 外下图 -->
<div class="bottomImgBox"><img src="../assets/tu6.jpg" /></div>
<!--======================= 内部正方体 =======================-->
<!-- 内前图 -->
<p class="inFrontImgBox"><img src="../assets/tu7.jpg" /></p>
<!-- 内后图 -->
<p class="inqueenImgBox"><img src="../assets/tu8.jpg" /></p>
<!-- 内左图 -->
<p class="inLeftImgBox"><img src="../assets/tu9.jpg" /></p>
<!-- 内右图 -->
<p class="inRightImgBox"><img src="../assets/tu10.jpg" /></p>
<!-- 内上图 -->
<p class="inTopImgBox"><img src="../assets/tu11.jpg" /></p>
<!-- 内下图 -->
<p class="inBottomImgBox"><img src="../assets/tu12.jpg" /></p>
</div>
</div>
</div>
Three-dimensional effect
The core of the three-dimensional effect css3is transform-stylethe attribute in the application.
transform-style property
transform-styleAttributes are used to specify how nested elements are rendered in three-dimensional space. When the value flatis , it means that all child elements 2Dare presented in the plane; preserve-3dwhen , it means that all child elements 3Dare presented in the space.
| attribute value | describe |
|---|---|
| flat (default) | will set the child elements of the element in the plane of that element |
| preserve-3d | Will indicate that the element's children should be in 3D space |
注意：
- This attribute must be used together with
transformthe attribute , otherwise it will have no effect; - This attribute cannot be inherited by child elements;
- The effect of this attribute acts on child elements, not on itself.
Effects of Rotation and Transformation
We need animationto hoverachieve the effect of rotation and transformation through the cooperation of attributes and pseudo-class attributes.
Rotate core code
.outerBox{
-webkit-animation: rotate 10s infinite;
}
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
Transform core code
.outerBox:hover .frontImgBox {
transform: rotateY(0deg) translateZ(200px);
}
.outerBox:hover .queenImgBox {
transform: translateZ(-200px) rotateY(180deg);
}
.outerBox:hover .liftImgBox {
transform: rotateY(90deg) translateZ(200px);
}
.outerBox:hover .rightImgBox {
transform: rotateY(-90deg) translateZ(200px);
}
.outerBox:hover .topImgBox {
transform: rotateX(90deg) translateZ(200px);
}
.outerBox:hover .bottomImgBox {
transform: rotateX(-90deg) translateZ(200px);
}
So far, we have analyzed the core points of the entire function, not much to say, let's take a look at the complete source code⤵.
full source code
<template>
<div class="parentBox">
<div class="contantBox">
<div class="outerBox">
<!--======================= 外部正方体 =======================-->
<!-- 外前图 -->
<div class="frontImgBox"><img src="../assets/tu1.jpg" /></div>
<!-- 外后图 -->
<div class="queenImgBox"><img src="../assets/tu2.jpg" /></div>
<!-- 外左图 -->
<div class="liftImgBox"><img src="../assets/tu3.jpg" /></div>
<!-- 外右图 -->
<div class="rightImgBox"><img src="../assets/tu4.jpg" /></div>
<!-- 外上图 -->
<div class="topImgBox"><img src="../assets/tu5.jpg" /></div>
<!-- 外下图 -->
<div class="bottomImgBox"><img src="../assets/tu6.jpg" /></div>
<!--======================= 内部正方体 =======================-->
<!-- 内前图 -->
<p class="inFrontImgBox"><img src="../assets/tu7.jpg" /></p>
<!-- 内后图 -->
<p class="inqueenImgBox"><img src="../assets/tu8.jpg" /></p>
<!-- 内左图 -->
<p class="inLeftImgBox"><img src="../assets/tu9.jpg" /></p>
<!-- 内右图 -->
<p class="inRightImgBox"><img src="../assets/tu10.jpg" /></p>
<!-- 内上图 -->
<p class="inTopImgBox"><img src="../assets/tu11.jpg" /></p>
<!-- 内下图 -->
<p class="inBottomImgBox"><img src="../assets/tu12.jpg" /></p>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.parentBox {
height: 100%;
background: rgb(31, 31, 31);
padding: 200px;
.contantBox {
width: 200px;
height: 200px;
margin: 0px auto;
position: relative;
.outerBox {
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 10s infinite;
animation-timing-function: linear; //匀速
// 外部正反体样式
div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.75;
transition: all 0.4s;
img {
width: 100%;
height: 100%;
}
}
.frontImgBox {
transform: rotateY(0deg) translateZ(100px);
}
.queenImgBox {
transform: translateZ(-100px) rotateY(180deg);
}
.liftImgBox {
transform: rotateY(90deg) translateZ(100px);
}
.rightImgBox {
transform: rotateY(-90deg) translateZ(100px);
}
.topImgBox {
transform: rotateX(90deg) translateZ(100px);
}
.bottomImgBox {
transform: rotateX(-90deg) translateZ(100px);
}
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
// 内部正方体样式
p {
display: bloack;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
img {
width: 100%;
height: 100%;
}
}
.inFrontImgBox {
transform: rotateY(0deg) translateZ(50px);
}
.inqueenImgBox {
transform: translateZ(-50px) rotateY(180deg);
}
.inLeftImgBox {
transform: rotateY(90deg) translateZ(50px);
}
.inRightImgBox {
transform: rotateY(-90deg) translateZ(50px);
}
.inTopImgBox {
transform: rotateX(90deg) translateZ(50px);
}
.inBottomImgBox {
transform: rotateX(-90deg) translateZ(50px);
}
}
// 鼠标触摸后样式
.outerBox:hover {
cursor: pointer;
}
.outerBox:hover .frontImgBox {
transform: rotateY(0deg) translateZ(200px);
}
.outerBox:hover .queenImgBox {
transform: translateZ(-200px) rotateY(180deg);
}
.outerBox:hover .liftImgBox {
transform: rotateY(90deg) translateZ(200px);
}
.outerBox:hover .rightImgBox {
transform: rotateY(-90deg) translateZ(200px);
}
.outerBox:hover .topImgBox {
transform: rotateX(90deg) translateZ(200px);
}
.outerBox:hover .bottomImgBox {
transform: rotateX(-90deg) translateZ(200px);
}
}
}
</style>
achieve effect
