Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to achieve a simple cube in css3". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve a simple cube in css3" can help you solve the problem.

Write a simple cube

1. We first use css to implement a box, a box has six sides, we write six li, and wrap it in a ul. According to my experience in writing 3D animation, it is better to have a parent element to wrap it.

123456

2. Set the width and height of .parent first, and set the sight distance and base point position for him. Parent {

Width: 800px

Height: 400px

Border: 1px solid # 000

Margin: 0 auto

Perspective: 2000px

Perspective-origin:-40%-80%

Background: # 000

}

3. Set the width and height for ul and the preserve-3d attribute to retain the child element 3D transformation, and all the child elements li absolutely position ul {

Width: 50px

Position: relative

Margin: 100px auto

Transform-style: preserve-3d

}

Li {

Width: 100px

Height: 100px

Background: rgba (255,255,0,0.3)

Position: absolute

Text-align: center

Border: 3px solid greenyellow

}

The effect is shown in the following figure:

4. Write a face first and set background to its background: rgba (255,255,0,0.3); li:nth-child (1) {

Background: rgba (255,255,0,0.3)

Transform: translateY (50px) rotateX (90deg)

}

The effect is shown in the following figure:

5. We wrote the first face, and then we adjusted the other 6 faces as shown in the following figure. The rotation direction of rotate is not explained here, friends who do not understand can check other documents by themselves.

Li:nth-child (1) {

Transform: translateY (- 50px) rotateX (90deg)

}

Li:nth-child (2) {

Transform: translateY (50px) rotateX (90deg)

}

Li:nth-child (3) {

Transform: translateX (- 50px) rotateY (90deg)

}

Li:nth-child (4) {

Transform: translateX (50px) rotateY (90deg)

}

Li:nth-child (5) {

Transform: translateZ (50px)

}

Li:nth-child (6) {

Transform: translateZ (- 50px)

}

The effect is shown in the following figure:

Here are the effects of two css3D+ animations

1. The code is as follows:

Page 2

.container {

Width: 1000px

Height: 650px

Background: # 000

Perspective: 2000px

Border: 1px solid transparent

Overflow: hidden

Margin: 0 auto

Perspective-origin: 10% 20%

}

.cube {

Width: 200px

Height: 300px

Transform-style: preserve-3d

Margin:100px auto

Position: relative

Transform: rotateX (30deg)

Border-radius: 50%

Padding: 60px

}

.mian {

Width: 200px

Height: 300px

Background-image: url (1.jpg)

Background-position:400px 0

Position: absolute

Border: 1px solid # ccc

Transition: 2s

}

.mian1 {

Transform-origin: right

Transform: translateX (- 200px) rotateY (45deg)

Background-position: 0 0

}

.mian3 {

Transform-origin: left

Transform: translateX (200px) rotateY (45deg)

Background-position: 200px 0

}

.mian3: hover {

Transform: translateX (200px) rotateY (0deg)

}

.mian1: hover {

Transform: translateX (- 200px) rotateY (0deg)

}

2. The code is as follows:

Cube

* {

Margin: 0

Padding: 0

List-style: none

}

.parent {

Width: 1000px

Margin: 0 auto

Height: 600px

Background: black

Perspective: 5000px

Perspective-origin:-40%-120%

Border: 1px solid # 000

}

Ul {

Width: 100px

Height: 300px

Position: relative

Margin:100px auto

Transform-style: preserve-3d

Animation: zuan 3s linear infinite

Border: 1px solid greenyellow

}

Li {

Width: 100px

Height: 300px

Background: rgba (0,0,0,0.5)

Position: absolute

Text-align: center

Line-height: 100px

Border: 3px solid greenyellow

}

Li:nth-child (1) {

Transform: rotateY (30deg) translateZ (- 200px)

}

Li:nth-child (2) {

Transform: rotateY (60deg) translateZ (- 200px)

Background: rgba (255,0,0,0.5)

}

Li:nth-child (3) {

Transform: rotateY (90deg) translateZ (- 200px)

}

Li:nth-child (4) {

Transform: rotateY (120deg) translateZ (- 200px)

Background: rgba (0,0,255,0.5)

}

Li:nth-child (5) {

Transform: rotateY (150deg) translateZ (- 200px)

}

Li:nth-child (6) {

Transform: rotateY (180deg) translateZ (- 200px)

Background: rgba (255,0,255,0.5)

}

Li:nth-child (7) {

Transform: rotateY (210deg) translateZ (- 200px)

}

Li:nth-child (8) {

Transform: rotateY (240deg) translateZ (- 200px)

Background: rgba (0,255,0,0.5)

}

Li:nth-child (9) {

Transform: rotateY (270deg) translateZ (- 200px)

}

Li:nth-child (10) {

Transform: rotateY (300deg) translateZ (- 200px)

Background: rgba (0,255,255,0.5)

}

Li:nth-child (11) {

Transform: rotateY (330deg) translateZ (- 200px)

}

Li:nth-child (12) {

Transform: rotateY (360deg) translateZ (- 200px)

Background: rgba (255,255,255,0.5)

}

@ keyframes zuan {

0% {

Transform: rotateY (0deg)

}

100% {

Transform: rotateY (360deg)

}

}

This is the end of the introduction to "how to achieve a simple cube in css3". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.