程序员撩妹专用~~~好看的H5立方体创意相册,资源免费!!!程序员送给女孩子的礼物,非常适合送给小姐姐!

本文链接：https://blog.csdn.net/White_i/article/details/109238635

H5立方体程序员送给女孩子的礼物,非常适合送给小姐姐!程序员撩妹专用~~~

预览GIF:

在这里插入图片描述

代码详情

<html>
    <head>
        <title>H5立方</title>
        <meta charset="utf-8">
        <style>
            html{
                /* height: 100%;   */
                background: radial-gradient(circle, #333, #000, #000);  
            }  
            body{
                /* height: 100%; */
                /* margin: 0; */
                display: flex;
                justify-content: center;
                align-items: center;
                /* perspective: 1500px; */
            }
            main{  
                width: 300px;  
                height: 300px;  
				/**
				 * transform--style属性指定嵌套元素是怎样在三维空间中呈现。
				 * 使用此属性必须域transform 属性一起使用.
				 * transform-style: flat|preserve-3d;
				 * 					flat	表示所有子元素在2D平面呈现。
				 *					preserve-3d	表示所有子元素在3D空间中呈现。
				 */
                transform-style: preserve-3d;
                animation: 10s spin linear infinite;
            } 
            main div 
            {  
                position: absolute;
                width: 100%; 
                height: 100%;
                background-size: 100%;  
                /* border: 1px solid black; */
            }  
            .font  
            {  
                background-image: url(1.jpg);
                transform: translateZ(150px);  
            }  
            .back  
            {  
                background-image: url(2.jpg);
                transform: translateZ(-150px);  
            }  
        
            .left  
            {  
                background-image: url(3.jpg);
                transform: rotateY(90deg) translateZ(-150px);  
            }  
            .right  
            {  
                background-image: url(4.jpg);
                transform: rotateY(90deg) translateZ(150px);  
            }  
        
            .top  
            {  
                background-image: url(5.jpg);
                transform: rotateX(90deg) translateZ(-150px);  
            }  
            .bottom  
            {  
                background-image: url(6.jpg);
                transform: rotateX(90deg) translateZ(150px);  
            } 
            
            @keyframes spin  
            {  
                0%  
                {    
                    transform: rotateX(0) rotateY(0) rotateZ(0deg);  
                }  
                100%  
                {  
                    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);  
                }  
            } 
        </style>
    </head>
    <body>
        <main>
            <div class="font"></div>
            <div class="back"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
        </main>
    </body>
</html><html>
    <head>
        <title>H5立方</title>
        <meta charset="utf-8">
        <style>
            html{
                /* height: 100%;   */
                background: radial-gradient(circle, #333, #000, #000);  
            }  
            body{
                /* height: 100%; */
                /* margin: 0; */
                display: flex;
                justify-content: center;
                align-items: center;
                /* perspective: 1500px; */
            }
            main{  
                width: 300px;  
                height: 300px;  
				/**
				 * transform--style属性指定嵌套元素是怎样在三维空间中呈现。
				 * 使用此属性必须域transform 属性一起使用.
				 * transform-style: flat|preserve-3d;
				 * 					flat	表示所有子元素在2D平面呈现。
				 *					preserve-3d	表示所有子元素在3D空间中呈现。
				 */
                transform-style: preserve-3d;
                animation: 10s spin linear infinite;
            } 
            main div 
            {  
                position: absolute;
                width: 100%; 
                height: 100%;
                background-size: 100%;  
                /* border: 1px solid black; */
            }  
            .font  
            {  
                background-image: url(1.jpg);
                transform: translateZ(150px);  
            }  
            .back  
            {  
                background-image: url(2.jpg);
                transform: translateZ(-150px);  
            }  
        
            .left  
            {  
                background-image: url(3.jpg);
                transform: rotateY(90deg) translateZ(-150px);  
            }  
            .right  
            {  
                background-image: url(4.jpg);
                transform: rotateY(90deg) translateZ(150px);  
            }  
        
            .top  
            {  
                background-image: url(5.jpg);
                transform: rotateX(90deg) translateZ(-150px);  
            }  
            .bottom  
            {  
                background-image: url(6.jpg);
                transform: rotateX(90deg) translateZ(150px);  
            } 
            
            @keyframes spin  
            {  
                0%  
                {    
                    transform: rotateX(0) rotateY(0) rotateZ(0deg);  
                }  
                100%  
                {   
                    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);  
                }  
            } 
        </style>
    </head>
    <body>
        <main>
            <div class="font"></div>
            <div class="back"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
        </main>
    </body>
</html>