Pure css3 implementation of 3D cube rotation special effects code
In the NetEase front-end micro-professional course, there is an extracurricular assignment to implement a 3D rotating cube. I spent some time doing it, and it was interesting. I wrote a simple tutorial for everyone to learn. First put the final effect to be achieved.
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>CSS3 3D立方体多边形动画特效 - 代码笔记</title><style type="text/css">*{ margin:0 auto; padding:0; } @keyframes rotate{ 0%{ transform:rotateX(0deg) rotateY(0deg); } 100%{ transform:rotateX(360deg) rotateY(360deg); } } html{ background:linear-gradient(#ff0 0%, #000 80%); height:100%; } .wrap{ margin-top:200px; perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */ } .cube{ width:200px; height:200px; position:relative; color:#fff; font-size:36px; font-weight:bold; text-align:center; line-height:200px; transform-style:preserve-3d; /* 默认flat 2D */ transform:rotateX(-30deg) rotateY(-70deg); animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */ } .cube > div{ width:100%; height:100%; border:1px solid #fff; position:absolute; background-color:#333; opacity:.6; transition:transform 0.4s ease-in; } .cube .out-front{ transform: translateZ(100px); } .cube .out-back{ transform: translateZ(-100px) rotateY(180deg); } .cube .out-left{ transform: translateX(-100px) rotateY(-90deg); } .cube .out-right{ transform: translateX(100px) rotateY(90deg); } .cube .out-top{ transform: translateY(-100px) rotateX(90deg); } .cube .out-bottom{ transform: translateY(100px) rotateX(-90deg); } .cube > span{ display:block; width:100px; height:100px; border:1px solid black; background-color:#999; position:absolute; top:50px; left:50px; } .cube .in-front{ transform: translateZ(50px); } .cube .in-back{ transform: translateZ(-50px) rotateY(180deg); } .cube .in-left{ transform: translateX(-50px) rotateY(-90deg); } .cube .in-right{ transform: translateX(50px) rotateY(90deg); } .cube .in-top{ transform: translateY(-50px) rotateX(90deg); } .cube .in-bottom{ transform: translateY(50px) rotateX(-90deg); } .wrap:hover .out-front{ transform: translateZ(200px); } .wrap:hover .out-back{ transform: translateZ(-200px) rotateY(180deg); } .wrap:hover .out-left{ transform: translateX(-200px) rotateY(-90deg); } .wrap:hover .out-right{ transform: translateX(200px) rotateY(90deg); } .wrap:hover .out-top{ transform: translateY(-200px) rotateX(90deg); } .wrap:hover .out-bottom{ transform: translateY(200px) rotateX(-90deg); } </style> </head> <body> <div class="wrap"> <div class="cube"> <div class="out-front">前面</div> <div class="out-back">后面</div> <div class="out-left">左面</div> <div class="out-right">右面</div> <div class="out-top">上面</div> <div class="out-bottom">下面</div> <span class="in-front"></span> <span class="in-back"></span> <span class="in-left"></span> <span class="in-right"></span> <span class="in-top"></span> <span class="in-bottom"></span> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> </div> </body> </html>
【Related recommendations】
1. Special recommendation:" PHP Programmer Toolbox" V0.1 version download
2. Free css online video tutorial
3. php.cn Dugu Jiujian (2)-css video tutorial
The above is the detailed content of Pure css3 implementation of 3D cube rotation special effects code. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



How to use Vue to implement pop-up window effects requires specific code examples. In recent years, with the development of web applications, pop-up window effects have become one of the commonly used interaction methods among developers. As a popular JavaScript framework, Vue provides rich functions and ease of use, and is very suitable for implementing pop-up window effects. This article will introduce how to use Vue to implement pop-up window effects and provide specific code examples. First, we need to create a new Vue project using Vue's CLI tool. open end

How to use Vue to implement full-screen masking effects. In web development, we often encounter scenarios that require full-screen masking, such as displaying a masking layer when loading data to prevent users from performing other operations, or in some special scenarios. Use a mask layer to highlight an element. Vue is a popular JavaScript framework that provides convenient tools and components to achieve various effects. In this article, I will introduce how to use Vue to achieve the effect of full-screen masking, and provide some specific code examples. At first, we

How to use Vue to implement sidebar effects Vue is a popular JavaScript framework. Its simplicity, ease of use, and flexibility enable developers to quickly build interactive single-page applications. In this article, we will learn how to use Vue to implement a common sidebar effect, and provide specific code examples to help us understand better. Create a Vue project First, we need to create a Vue project. You can use the VueCLI (command line interface) provided by Vue, which can quickly generate

Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: <!--index.wxml-->&l

When we use Word office software for document processing, we often need to insert some pictures and other materials into the document. However, in order to achieve beautiful layout, we also need to perform some special layout on the pictures, among which rotation processing is the most basic. Typesetting processing, however, for some newcomers to the workplace who have just come into contact with Word office software, they may not be able to process pictures in Word documents. Below, we will share how to rotate pictures in Word. We hope it will be helpful and inspiring to you. 1. First, we open a Word document, and then click the Insert-Picture button on the menu bar to insert a random picture on the computer to facilitate our operation and demonstration. 2. If we want to rotate the image, then we need to

HTML, CSS and jQuery: An introduction to techniques for implementing image folding and expanding special effects. In web design and development, we often need to implement some dynamic special effects to increase the attractiveness and interactivity of the page. Among them, the image folding and unfolding effect is a common but interesting technique. Through this special effect, we can make the image fold or expand under the user's operation to show more content or details. This article will introduce how to use HTML, CSS and jQuery to achieve this effect, with specific code examples. realize thoughts

How to use Vue to implement progress bar effects The progress bar is a common interface element that can be used to display the completion of a task or operation. In the Vue framework, we can implement special effects of the progress bar through some simple code. This article will introduce how to use Vue to implement progress bar effects and provide specific code examples. Create a Vue component First, we need to create a Vue component to implement the progress bar function. In Vue, components are reusable and can be used in multiple places. Create a file called Pro

How to use Vue to achieve 3D three-dimensional rotation effects As a popular front-end framework, Vue.js plays an important role in developing dynamic web pages and applications. It provides an intuitive, efficient way to build interactive interfaces and is easy to integrate and extend. This article will introduce how to use Vue.js to implement a stunning 3D stereoscopic rotation effect, and provide specific code examples. Before you start, make sure you have Vue.js installed and have some understanding of the basic usage of Vue.js. If you still
