HTML5 css3: 3D carousel effect album-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 css3: 3D carousel effect album

黄舟

Feb 21, 2017 pm 01:49 PM

The purpose of this blog is because there is a more important knowledge point about CSS 3D effects that was not mentioned in the attractive example of CSS3 in the previous HTML5 CSS3 topic to create a 3D flop effect in Baidu Tieba, which is perspective and tranlateY

Rendering: Hehe, I made some photos of my graduation from college into a merry-go-round, spinning around my liberal arts major, not forgetting the nurturing grace of my alma mater~

HTML5 css3: 3D carousel effect album

1. perspective

The perspective attribute includes two attributes: none and the length value with unit.

The default value of the perspective attribute is none, which means that the 3D object looks flat from infinite angles. Another value, , accepts a value with length units greater than 0. And its unit cannot be a percentage value. The larger the value, the farther the angle appears, creating a rather low intensity and very little change in 3D space. Conversely, the smaller this value, the closer the angle appears, creating a strong angle and a large 3D variation. To put it simply: when perspective sets length, the smaller it is, the more obvious the 3D effect is and the closer your eyes are to the 3D object, and vice versa.

2. transform: translateZ(length)

Assuming that perspective: 300px is set, the smaller the value of translateZ is set, the smaller the size of the sub-element will be. When the value is set When it is close to 300px, it seems that the element is in front of you. When it exceeds 300px, it reaches the back of your field of view and the element is invisible.

The core of the above example:

1. First, all the image containers have position:absolute, superimpose them together, and then set rotateY to 40*i and i respectively. = 0, 1, 2...9; all pictures will intersect into a flower-like shape

2. Then set translateZ for the container of each picture, and all pictures will move outward from the corresponding angle. Expand it into a big circle, which is the effect in the picture above.

html:

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <meta charset="utf-8"/>  
    <link href="css/reset.css" rel="stylesheet" type="text/css"/>  
    <script type="text/javascript" src="../../jquery-1.8.3.js"></script>  
  
    <script type="text/javascript">  
        // alert( 64 / Math.tan(20 / 180 * Math.PI));  
        var transform = function (element, value, key)  
        {  
            key = key || "Transform";  
            ["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix)  
            {  
                element.style[prefix + key] = value;  
            });  
  
            return element;  
        }  
  
  
        $(function ()  
        {  
            var deg = -40 , i = 1;  
            $("#container").click(function ()  
            {  
                transform($(this)[0], "rotateY(" + (deg * i++) + "deg)")  
            });  
        });  
  
    </script>  
  
     
  
</head>  
<body>  
<p id="stage">  
    <ul id="container">  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"  / alt="HTML5 css3: 3D carousel effect album" >  
            <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"  / alt="HTML5 css3: 3D carousel effect album" > <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"  / alt="HTML5 css3: 3D carousel effect album" > <span>Keep on going never give up.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"  / alt="HTML5 css3: 3D carousel effect album" > <span>Whatever is worth doing is worth doing well.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"  / alt="HTML5 css3: 3D carousel effect album" > <span>Believe in yourself.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/6.jpg"  class="lazy"  / alt="HTML5 css3: 3D carousel effect album" > <span>Action speak louder than words.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/7.jpg"  class="lazy"  / alt="HTML5 css3: 3D carousel effect album" > <span>Never put off what you can do today until tomorrow.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/8.jpg"  class="lazy"  / alt="HTML5 css3: 3D carousel effect album" > <span>Jack of all trades and master of none.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/9.jpg"  class="lazy"  / alt="HTML5 css3: 3D carousel effect album" > <span>Judge not from appearances.</span>  
        </li>  
    </ul>  
</p>  
</body>  
</html>

CSS：

li  
{  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
    position: absolute;  
    bottom: 0;  
}  
  
li img  
{  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
    vertical-align: middle;  
}  
  
li span  
{  
    display: block;  
    width: 128px;  
    text-align: center;  
    color: #333;  
    font-size: 8px;  
}  
  
#stage  
{  
  
    width: 900px;  
    min-height: 100px;  
    margin-left: auto;  
    margin-right: auto;  
    padding: 100px 50px;  
    -webkit-perspective: 1200px;  
    position: relative;  
}  
  
#container  
{  
    background: url("img/xawl.jpg") no-repeat 0 0;  
    margin-top: 200px;  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
    height: 100px;  
    margin-left: -64px;  
    -webkit-transition: -webkit-transform 1s;  
    transition: transform 1s;  
    -webkit-transform-style: preserve-3d;  
    position: absolute;  
    left: 50%;  
}  
  
li:nth-child(0)  
{  
    -webkit-transform: rotateY(0deg) translateZ(300px);  
}  
  
li:nth-child(1)  
{  
    -webkit-transform: rotateY(40deg) translateZ(300px);  
}  
  
li:nth-child(2)  
{  
    -webkit-transform: rotateY(80deg) translateZ(300px);  
}  
  
li:nth-child(3)  
{  
    -webkit-transform: rotateY(120deg) translateZ(300px);  
}  
  
li:nth-child(4)  
{  
    -webkit-transform: rotateY(160deg) translateZ(300px);  
}  
  
li:nth-child(5)  
{  
    -webkit-transform: rotateY(200deg) translateZ(300px);  
}  
  
li:nth-child(6)  
{  
    -webkit-transform: rotateY(240deg) translateZ(300px);  
}  
  
li:nth-child(7)  
{  
    -webkit-transform: rotateY(280deg) translateZ(300px);  
}  
  
li:nth-child(8)  
{  
    -webkit-transform: rotateY(320deg) translateZ(300px);  
}  
  
li:nth-child(9)  
{  
    -webkit-transform: rotateY(360deg) translateZ(300px);  
}

p# stage is used as the stage, set perspective, and set rotateY and translateZ for each li respectively; then we set p#container -webkit-transform-style: preserve-3d; transform-style: flat | preserve-3d where the flat value is the default Value, indicating that all child elements are rendered on a 2D plane. preserve-3d means that all child elements are rendered in 3D space. If the transform-style value is set to preserve-3d for an element, it means that the flattening operation is not performed and all its child elements are located in 3D space. Under normal circumstances, this attribute is used for the execution element of 3D animation effects, that is, it is to apply 3D animation effects, so its child elements should all be in 3D space.

One thing to note: In this example, the actual animation effect is due to mouse click, p#Container is changing rotateY inappropriately, all picture elements are in p#container, and have been displayed as a carousel Effect, what you need to do now is to rotate the Trojan, so you only need to change the rotateY 40 angle of p#container each time.

The above is the content of HTML5 css3: 3D Carousel Effect Album. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement

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

H5 Code Structure: Organizing Content for ReadabilityMay 07, 2025 am 12:06 AM

A reasonable H5 code structure allows the page to stand out among a lot of content. 1) Use semantic labels such as, etc. to organize content to make the structure clear. 2) Control the rendering effect of pages on different devices through CSS layout such as Flexbox or Grid. 3) Implement responsive design to ensure that the page adapts to different screen sizes.

H5 vs. Older HTML Versions: A ComparisonMay 06, 2025 am 12:09 AM

The main differences between HTML5 (H5) and older versions of HTML include: 1) H5 introduces semantic tags, 2) supports multimedia content, and 3) provides offline storage functions. H5 enhances the functionality and expressiveness of web pages through new tags and APIs, such as and tags, improving user experience and SEO effects, but need to pay attention to compatibility issues.

H5 vs. HTML5: Clarifying the Terminology and RelationshipMay 05, 2025 am 12:02 AM

The difference between H5 and HTML5 is: 1) HTML5 is a web page standard that defines structure and content; 2) H5 is a mobile web application based on HTML5, suitable for rapid development and marketing.

HTML5 Features: The Core of H5May 04, 2025 am 12:05 AM

The core features of HTML5 include semantic tags, multimedia support, form enhancement, offline storage and local storage. 1. Semantic tags such as, improve code readability and SEO effect. 2. Multimedia support simplifies the process of embedding media content through and tags. 3. Form Enhancement introduces new input types and verification properties, simplifying form development. 4. Offline storage and local storage improve web page performance and user experience through ApplicationCache and localStorage.

H5: Exploring the Latest Version of HTMLMay 03, 2025 am 12:14 AM

HTML5isamajorrevisionoftheHTMLstandardthatrevolutionizeswebdevelopmentbyintroducingnewsemanticelementsandcapabilities.1)ItenhancescodereadabilityandSEOwithelementslike,,,and.2)HTML5enablesricher,interactiveexperienceswithoutplugins,allowingdirectembe

Beyond Basics: Advanced Techniques in H5 CodeMay 02, 2025 am 12:03 AM

Advanced tips for H5 include: 1. Use complex graphics to draw, 2. Use WebWorkers to improve performance, 3. Enhance user experience through WebStorage, 4. Implement responsive design, 5. Use WebRTC to achieve real-time communication, 6. Perform performance optimization and best practices. These tips help developers build more dynamic, interactive and efficient web applications.

H5: The Future of Web Content and DesignMay 01, 2025 am 12:12 AM

H5 (HTML5) will improve web content and design through new elements and APIs. 1) H5 enhances semantic tagging and multimedia support. 2) It introduces Canvas and SVG, enriching web design. 3) H5 works by extending HTML functionality through new tags and APIs. 4) Basic usage includes creating graphics using it, and advanced usage involves WebStorageAPI. 5) Developers need to pay attention to browser compatibility and performance optimization.

H5: New Features and Capabilities for Web DevelopmentApr 29, 2025 am 12:07 AM

H5 brings a number of new functions and capabilities, greatly improving the interactivity and development efficiency of web pages. 1. Semantic tags such as enhance SEO. 2. Multimedia support simplifies audio and video playback through and tags. 3. Canvas drawing provides dynamic graphics drawing tools. 4. Local storage simplifies data storage through localStorage and sessionStorage. 5. The geolocation API facilitates the development of location-based services.

See all articles