Home Web Front-end H5 Tutorial css3 transform 3d Use css3 to create a dynamic 3d cube (html5 practice)_html5 tutorial skills

css3 transform 3d Use css3 to create a dynamic 3d cube (html5 practice)_html5 tutorial skills

May 16, 2016 pm 03:50 PM
transform

In today’s course, I will introduce to you how to use css3 to create a 3D cube. You can browse the actual effect through the link below, and operate the up, down, left and right keys to achieve the cube flipping effect.
Demo address: http://www.jb51.net/jiaoben/70022.html
Let’s start with how to make it.
html:

Copy the code
The code is as follows:




One face


Up, down, left, right


Lorem ipsum.


New forms of navigation are fun.


Rotating 3D cube


More content




In the above html, the 6 divs with class face represent the 6 sides of the cube respectively, using classes from one to six Names distinguish them. The outside contains two layers of containers with IDs of cube and experiment. Both layers are necessary. Without either one, the 3D effect cannot be produced.
The experiment plays the role of a lens. Set the focus on it so that the 3D effect is shown on the inner elements. The
perspective attribute defines the depth of the z-axis plane and also defines the relative sizes of elements above and below the plane. In general, the smaller the perspective value, the larger the object is and the closer it is to you; the larger the perspective value is, the smaller the object is and the farther it is from you. You can check the effect at http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html.
The perspective-origin attribute defines the origin of the perspective.
css:

Copy code
The code is as follows:

#experiment {
-webkit-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
perspective: 800;
-webkit-perspective- origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
}

The properties set by cube contain fixed width and height, and position is set to relative. Fixed height and width are necessary so that the elements in the cube can perform 3D animation within a limited area. If you set the height and width to 100%, the elements in the cube will move throughout the page.
Transition is used to set animation-related attributes. transform-style: preserve-3d; causes all elements in the cube to produce a 3D effect as a whole.
You can visit http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ for more information.
css:

Copy code
The code is as follows:

#cube {
position: relative;
margin: 100px auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-moz-transition : -moz-transform 2s linear;
-o-transition: -o-transform 2s linear;
transition: transform 2s linear;
-webkit-transform-style: preserve-3d;
- moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

Next Set css properties uniformly for the 6 faces of the cube.
css:

Copy code
The code is as follows:

.face {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7) ;
}

Next, set the 3D related attributes of the six faces, use rotateX or rotateY to flip the cube surface orientation, and use translateZ to move the cube surface in the 3D space. .
css:

Copy code
The code is as follows:

#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
-o-transform: rotateX(90deg) translateZ(200px);
transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
-o-transform: rotateY(90deg) translateZ(200px);
transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
-o-transform: rotateY(180deg) translateZ(200px);
transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
-o-transform: rotateY(-90deg) translateZ(200px);
transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(200px);
-moz-transform: rotateX(-90deg) translateZ(200px);
-o-transform: rotateX(-90deg) translateZ(200px);
transform: rotateX(-90deg) translateZ(200px);
}

最后要做的是为页面绑定keydown事件,这样当你按下上下左右键的时候,实现立方体的翻转运动效果。
javascript:

复制代码
代码如下:

var xAngle = 0, yAngle = 0;
document.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
case 37: // left
yAngle -= 90;
break;
case 38: // up
xAngle = 90;
break;
case 39: // right
yAngle = 90;
break;
case 40: // down
xAngle -= 90;
break;
};
$('cube').style.webkitTransform = "rotateX(" xAngle "deg) rotateY(" yAngle "deg)";
}, false);

课程就讲到这里,接下来大家可以动手尝试一下。
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

PHP Tutorial
1510
276
Why is my image not showing up in HTML? Why is my image not showing up in HTML? Jul 28, 2025 am 02:08 AM

Image not displayed is usually caused by a wrong file path, incorrect file name or extension, HTML syntax issues, or browser cache. 1. Make sure that the src path is consistent with the actual location of the file and use the correct relative path; 2. Check whether the file name case and extension match exactly, and verify whether the image can be loaded by directly entering the URL; 3. Check whether the img tag syntax is correct, ensure that there are no redundant characters and the alt attribute value is appropriate; 4. Try to force refresh the page, clear the cache, or use incognito mode to eliminate cache interference. Troubleshooting in this order can solve most HTML image display problems.

How to use radio buttons in HTML5? How to use radio buttons in HTML5? Jul 21, 2025 am 01:08 AM

The key to using radio buttons in HTML5 is to understand how they work and correctly organize the code structure. 1. The name attribute of each radio button must be the same to achieve mutually exclusive selection; 2. Use label tags to improve accessibility and click experience; 3. It is recommended to wrap each option in a div or label to enhance structural clarity and style control; 4. Set default selections through the checked attribute; 5. The value value should be concise and meaningful, which is convenient for form submission processing; 6. The style can be customized through CSS, but the function needs to be ensured to be normal. Mastering these key points can effectively avoid common problems and improve the effectiveness of use.

Headless CMS and Static Site Generation (SSG) with Astro Headless CMS and Static Site Generation (SSG) with Astro Jul 26, 2025 am 07:31 AM

Use headless CMS in conjunction with Astro's static site generation (SSG) to build high-performance, content-driven websites. 2.Astro gets content from headless CMS (such as Sanity, Contentful, Strapi, WordPress, or DatoCMS) through APIs and pre-renders as static pages. 3. Use getStaticPaths() to generate the page path, obtain data through CMSAPI calls, and separate the content from the front-end. 4. Advantages include excellent performance (fast loading, SEO-friendly), friendly editing experience, architectural flexibility, high security and scalability. 5. Content updates require rebuilding of the site, and you can use CMSwebhook to touch

Is the  tag still used in HTML5? Is the tag still used in HTML5? Jul 21, 2025 am 02:47 AM

Yes, it is part of HTML5, but its use has gradually decreased and is controversial. Used to combine the main title with the subtitle so that only the highest level of titles are identified in the document outline; for example, the main title and subtitle can be wrapped in to indicate that they are only auxiliary titles rather than independent chapter titles; however, reasons why they are no longer widely used include: 1. The browser and screen readers are inconsistent support for them, 2. There are simpler alternatives such as using CSS to control styles, 3. The HTML document outline algorithm is not widely supported; despite this, it can still be considered in websites or documents with high semantic requirements; while in most cases, developers tend to use a single, manage styles through CSS and maintain clear title levels.

H5 Web MIDI API for Advanced Control Surfaces H5 Web MIDI API for Advanced Control Surfaces Jul 19, 2025 am 03:04 AM

To use WebMIDIAPI to build an advanced control interface, you must first obtain device permissions, request authorization through navigator.requestMIDIAccess() and process input and output devices; secondly, listen or send MIDI messages, such as listening to knob operations through input.addEventListener, and send LED control instructions through output.send; you must also adapt to different controllers, establish configuration files or provide user-defined mapping functions; finally pay attention to development skills such as real-time response, error handling, debugging tools and channel number matching.

The Importance of Semantic HTML for SEO and Accessibility The Importance of Semantic HTML for SEO and Accessibility Jul 30, 2025 am 05:05 AM

SemanticHTMLimprovesbothSEOandaccessibilitybyusingmeaningfultagsthatconveycontentstructure.1)ItenhancesSEOthroughbettercontenthierarchywithproperheadinglevels,improvedindexingviaelementslikeand,andsupportforrichsnippetsusingstructureddata.2)Itboostsa

H5 Barcode and QR Code Scanning with getUserMedia H5 Barcode and QR Code Scanning with getUserMedia Jul 20, 2025 am 02:03 AM

The H5 page realizes the barcode and QR code scanning functions, mainly by calling getUserMedia to obtain camera permissions and combine it with the decoding library for real-time identification. 1. First use getUserMedia to obtain camera permissions and bind the video stream to the tag. Pay attention to the differences in HTTPS environment and device support; 2. By intercepting video frames and extracting image data, control the recognition frequency to optimize performance; 3. Use decoding libraries such as ZXing or QuaggaJS for image recognition, it is recommended to prevent the recognition results from being shaken; 4. In terms of compatibility, video constraints can be set to optimize device adaptation, and improve user experience through UI prompts; 5. In terms of performance optimization, it is recommended to use WebWorker to perform decoding tasks to avoid blocking the main

H5 Network Information API for Adaptive Loading H5 Network Information API for Adaptive Loading Jul 23, 2025 am 04:15 AM

H5's NetworkInformation API can optimize loading strategies by judging network type. ① Use navigator.connection to obtain the network type and online status; ② Decide to load high-definition resources or lightweight content based on effectiveType values (such as slow-2g, 4g, 5g); ③ Dynamically adjust the loading strategy by listening to change events; ④ Pay attention to issues such as compatibility, limited iOS support and privacy mode restrictions.

See all articles