How to write the code of 3D rotation album with HTML5
This article mainly introduces the HTML5 to achieve 3D rotation album code how to write the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this HTML5 to achieve 3D rotation album code how to write the article will have a harvest, let's take a look.
The HTML5 code is as follows:
HTML5 3D rotated photo albums can be hovered by mouse * {padding: 0 margin: 0 borderline: none;outline: none;box-sizing: border-box;} *: before,*:after {box-sizing: border-box;} html,body {min-height: 100%;} body {background-image: radial-gradient (mintcream 0%, lightgray 100%);. Container {margin: 4% auto;width: 210px position: relative;perspective: 1000px;} # carousel width: 100% scape height: 100% Position: absolute;transform-style: preserve-3d;animation: rotation 20s infinite linear;} # carousel:hover {animation-play-state: paused;} # carousel figure {display: block;position: absolute;width: 220pxpolitics height: 120pxleft: 10pxdisplay top: 10pxpolitics background: black;overflow: hidden;border: solid 5px black;} img {filter: grayscale (1); cursor: pointer;transition: all 0.3s ease 0sscape width: 100%; img:hover {filter: grayscale (0) Transform: scale (1.2,1.2);} # carousel figure:nth-child (1) {transform: rotateY (0deg) translateZ (288px);} # carousel figure:nth-child (2) {transform: rotateY (60deg) translateZ (288px);} # carousel figure:nth-child (3) {transform: rotateY (120deg) translateZ (288px);} # carousel figure:nth-child (4) {transform: rotateY (180deg) translateZ (288px) } # carousel figure:nth-child (5) {transform: rotateY (240deg) translateZ (288px);} # carousel figure:nth-child (6) {transform: rotateY (300deg) translateZ (288px);} @ keyframes rotation {from {transform: rotateY (0deg);} to {transform: rotateY (360deg);}}
This is the end of the article on "how to write the code for HTML5 3D rotation albums". Thank you for reading! I believe that everyone has a certain understanding of the "HTML5 3D rotation album code how to write" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.
