Show you the cat Cube with CSS!!

Suck the cat with code! This paper is participating in[Cat Essay Campaign].

preface

This time, we use VUe2 + SCSS, take you to achieve a hexahedral cat cube.

This logic we do not apply any JS code, only rely on CSS to complete.

So, through this article, you can gain some tips on CSS animation.

Let’s see what happens

preview

This time we are going to use the knowledge

transform

Explanation: The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements.

Which one? You can look it up on this form

transform-style

Explanation: The transform–style property specifies how nested elements are rendered in three dimensions.

Note: To use this property, you must first use the transform property.

transition

The transition property is a shorthand property that sets four transition properties:

transition-property
transition-duration
transition-timing-function
transition-delay

Note: Always set the transition-duration property, otherwise a duration of 0 will not have a transition effect.

Analysis of the

Let’s break down the characteristics of this cat 3D. It has the following characteristics

It has beenKeep turning
It is composed ofTwo hexahedronsOne on the outside, one on the inside
The mouse is near theThe outer hexahedron, the six sides of the hexahedron willOutward expansion, exposing the small hexahedron inside

start

1. Because we’re making hexahedrons, there are two hexahedrons, one inside and one outside. Two hexahedrons, 12 faces, and let’s start with 12 pictures of cat owners.

And then we’ll create a new oneimg3D.vueFile, open dry

Step one

Let’s do the first feature of the rotation

The code is as follows:

<template>
  <div>
    <div class="container">
    </div>
  </div>
</template>

<script>

</script>

<style lang="scss" scoped>
* {
  margin: 0px;
  padding: 0px;
}

.container {
  position: relative;
  margin: 0px auto;
  margin-top: 9%;
  margin-left: 42%;
  width: 200px;
  height: 200px;
  transform: rotateX(-30deg) rotateY(-80deg);
  transform-style: preserve-3d;
  animation: rotate 15s infinite;
  /* I used a border line here to make it easier to see the effect */
  border: 1px solid red;
}

/* Rotate the cube */
@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }

  to {
    transform: rotateX(360deg) rotateY(360deg); }}</style>
Copy the code

Step 2

Make the outside of the hexahedron, and the hexahedron in the mouse hover, need to expand the effect is as follows:

<template>
  <div>
    <div class="container">
      <! -- Outer cube -->
      <div class="outer-container">
        <div class="outer-top">
          <img :src="cat1" />
        </div>
        <div class="outer-bottom">
          <img :src="cat2" />
        </div>
        <div class="outer-front">
          <img :src="cat3" />
        </div>
        <div class="outer-back">
          <img :src="cat4" />
        </div>
        <div class="outer-left">
          <img :src="cat5" />
        </div>
        <div class="outer-right">
          <img :src="cat6" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cat1 from "@/assets/cats/cat1.png";
import cat2 from "@/assets/cats/cat2.png";
import cat3 from "@/assets/cats/cat3.png";
import cat4 from "@/assets/cats/cat4.png";
import cat5 from "@/assets/cats/cat5.png";
import cat6 from "@/assets/cats/cat6.png";

export default {
  data() {
    return{ cat1, cat2, cat3, cat4, cat5, cat6, }; }};</script>

<style lang="scss" scoped>./* Set the image to be displayed in 3d space */
.container .outer-container {
  transform-style: preserve-3d;
}
/* Set the image size to 200px */
.outer-container img {
  width: 200px;
  height: 200px;
}

/* Outer cube style */
.outer-container .outer-top..outer-container .outer-bottom..outer-container .outer-right..outer-container .outer-left..outer-container .outer-front..outer-container .outer-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border: 1px solid #fff;
  opacity: 0.3;
  transition: all 0.9 s;
}

/* The hexahedron is supported by the transform property */
.outer-top {
  transform: rotateX(90deg) translateZ(100px);
}

.outer-bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

.outer-front {
  transform: rotateY(0deg) translateZ(100px);
}

.outer-back {
  transform: translateZ(-100px) rotateY(180deg);
}

.outer-left {
  transform: rotateY(90deg) translateZ(100px);
}

.outer-right {
  transform: rotateY(-90deg) translateZ(100px);
}

/* Hover over the hexahedron, the six edges are expanded out, and the transparency becomes lighter, the cat picture is clearer */
.cube:hover .outer-top {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: rotateX(90deg) translateZ(200px);
}

.container:hover .outer-bottom {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: rotateX(-90deg) translateZ(200px);
}

.container:hover .outer-front {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: rotateY(0deg) translateZ(200px);
}

.container:hover .outer-back {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: translateZ(-200px) rotateY(180deg);
}

.container:hover .outer-left {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: rotateY(90deg) translateZ(200px);
}

.container:hover .outer-right {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: rotateY(-90deg) translateZ(200px);
}
</style>

Copy the code

Step 3

Get inside the hexahedron, the hexagon is relatively simple, no move in and out, mouse hover, etc. The style effect is as follows:

The code is as follows:

<template>
  <div>
    <div class="container">
      <! -- Outer cube -->.<! -- Inner cube -->
      <div class="inner-container">
        <div class="inner-top">
          <img :src="cat7" />
        </div>
        <div class="inner-bottom">
          <img :src="cat8" />
        </div>
        <div class="inner-front">
          <img :src="cat9" />
        </div>
        <div class="inner-back">
          <img :src="cat10" />
        </div>
        <div class="inner-left">
          <img :src="cat11" />
        </div>
        <div class="inner-right">
          <img :src="cat12" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>.import cat7 from "@/assets/cats/cat7.png";
import cat8 from "@/assets/cats/cat8.png";
import cat9 from "@/assets/cats/cat9.png";
import cat10 from "@/assets/cats/cat10.png";
import cat11 from "@/assets/cats/cat11.png";
import cat12 from "@/assets/cats/cat12.png";

export default {
  data() {
    return{... cat7, cat8, cat9, cat10, cat11, cat12, }; }};</script>

<style lang="scss" scoped>./* Set the image to be displayed in 3d space */
.container .outer-container..container .inner-container {
  transform-style: preserve-3d; }.../* Set the hexahedron inside */
/* Nested inner cube style */
.inner-container > div {
  position: absolute;
  top: 35px;
  left: 35px;
  width: 130px;
  height: 130px;
}
/* Inside hexahedron size width height 130px */
.inner-container img {
  width: 130px;
  height: 130px;
}

.inner-top {
  transform: rotateX(90deg) translateZ(65px);
}

.inner-bottom {
  transform: rotateX(-90deg) translateZ(65px);
}

.inner-front {
  transform: rotateY(0deg) translateZ(65px);
}

.inner-back {
  transform: translateZ(-65px) rotateY(180deg);
}

.inner-left {
  transform: rotateY(90deg) translateZ(65px);
}

.inner-right {
  transform: rotateY(-90deg) translateZ(65px);
}
</style>
Copy the code

The final complete code:

<template>
  <div>
    <div class="container">
      <! -- Outer cube -->
      <div class="outer-container">
        <div class="outer-top">
          <img :src="cat1" />
        </div>
        <div class="outer-bottom">
          <img :src="cat2" />
        </div>
        <div class="outer-front">
          <img :src="cat3" />
        </div>
        <div class="outer-back">
          <img :src="cat4" />
        </div>
        <div class="outer-left">
          <img :src="cat5" />
        </div>
        <div class="outer-right">
          <img :src="cat6" />
        </div>
      </div>
      <! -- Inner cube -->
      <div class="inner-container">
        <div class="inner-top">
          <img :src="cat7" />
        </div>
        <div class="inner-bottom">
          <img :src="cat8" />
        </div>
        <div class="inner-front">
          <img :src="cat9" />
        </div>
        <div class="inner-back">
          <img :src="cat10" />
        </div>
        <div class="inner-left">
          <img :src="cat11" />
        </div>
        <div class="inner-right">
          <img :src="cat12" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cat1 from "@/assets/cats/cat1.png";
import cat2 from "@/assets/cats/cat2.png";
import cat3 from "@/assets/cats/cat3.png";
import cat4 from "@/assets/cats/cat4.png";
import cat5 from "@/assets/cats/cat5.png";
import cat6 from "@/assets/cats/cat6.png";
import cat7 from "@/assets/cats/cat7.png";
import cat8 from "@/assets/cats/cat8.png";
import cat9 from "@/assets/cats/cat9.png";
import cat10 from "@/assets/cats/cat10.png";
import cat11 from "@/assets/cats/cat11.png";
import cat12 from "@/assets/cats/cat12.png";

export default {
  data() {
    return{ cat1, cat2, cat3, cat4, cat5, cat6, cat7, cat8, cat9, cat10, cat11, cat12, }; }};</script>

<style lang="scss" scoped>
* {
  margin: 0px;
  padding: 0px;
}

.container {
  position: relative;
  margin: 0px auto;
  margin-top: 9%;
  margin-left: 42%;
  width: 200px;
  height: 200px;
  transform: rotateX(-30deg) rotateY(-80deg);
  transform-style: preserve-3d;
  animation: rotate 15s infinite;
  /* I used a border line here to make it easier to see the effect */
  /* border: 1px solid red; * /
}

/* Rotate the cube */
@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }

  to {
    transform: rotateX(360deg) rotateY(360deg); }}/* Set the image to be displayed in 3d space */
.container .outer-container..container .inner-container {
  transform-style: preserve-3d;
}
/* Set the image size to 200px */
.outer-container img {
  width: 200px;
  height: 200px;
}

/* Outer cube style */
.outer-container .outer-top..outer-container .outer-bottom..outer-container .outer-right..outer-container .outer-left..outer-container .outer-front..outer-container .outer-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border: 1px solid #fff;
  opacity: 0.3;
  transition: all 0.9 s;
}

/* The hexahedron is supported by the transform property */
.outer-top {
  transform: rotateX(90deg) translateZ(100px);
}

.outer-bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

.outer-front {
  transform: rotateY(0deg) translateZ(100px);
}

.outer-back {
  transform: translateZ(-100px) rotateY(180deg);
}

.outer-left {
  transform: rotateY(90deg) translateZ(100px);
}

.outer-right {
  transform: rotateY(-90deg) translateZ(100px); } // Hover over the hexahedron, the six edges expand out, and the transparency becomes lighter, the cat picture is clearer.cube:hover .outer-top {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: rotateX(90deg) translateZ(200px);
}

.container:hover .outer-bottom {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: rotateX(-90deg) translateZ(200px);
}

.container:hover .outer-front {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: rotateY(0deg) translateZ(200px);
}

.container:hover .outer-back {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: translateZ(-200px) rotateY(180deg);
}

.container:hover .outer-left {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: rotateY(90deg) translateZ(200px);
}

.container:hover .outer-right {
  right: -70px;
  bottom: -70px;
  opacity: 0.8;
  transform: rotateY(-90deg) translateZ(200px);
}

/* Set the hexahedron inside */
/* Nested inner cube style */
.inner-container > div {
  position: absolute;
  top: 35px;
  left: 35px;
  width: 130px;
  height: 130px;
}
/* Inside hexahedron size width height 130px */
.inner-container img {
  width: 130px;
  height: 130px;
}

.inner-top {
  transform: rotateX(90deg) translateZ(65px);
}

.inner-bottom {
  transform: rotateX(-90deg) translateZ(65px);
}

.inner-front {
  transform: rotateY(0deg) translateZ(65px);
}

.inner-back {
  transform: translateZ(-65px) rotateY(180deg);
}

.inner-left {
  transform: rotateY(90deg) translateZ(65px);
}

.inner-right {
  transform: rotateY(-90deg) translateZ(65px);
}
</style>

Copy the code

Now that you’ve seen this, please give me a thumbs up before you go, because your thumbs up means a lot to me

preface

preview

Analysis of the

start

Step one

Step 2

Step 3

The final complete code:

Related Posts

Perfect fix for setInterval acceleration on browser switches

Perfect asynchronous programming from zero to one

[Front-end Engine] JavaScript prototype and prototype chain and Canvas captcha practice