电商项目（中）

以你之姓@ 2021-09-18 12:12 331阅读 0赞

![电商项目][1240]

> 电商项目（中）

旋转的图片：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>dashu</title>
        <style>
         div {
             width: 250px;
             height: 170px;
             border: 1px solid pink;
             margin: 200px auto;
             position: relative;
         }
            div img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                transition: all 0.6s;
                transform-origin: top right;
            }
         div:hover img:nth-child(1){
             transform: rotate(60deg);
         }
         div:hover img:nth-child(2){
             transform: rotate(120deg);
         }
         div:hover img:nth-child(3){
             transform: rotate(180deg);
         }
         div:hover img:nth-child(4){
             transform: rotate(240deg);
         }
         div:hover img:nth-child(5){
             transform: rotate(300deg);
         }
         div:hover img:nth-child(6){
             transform: rotate(360deg);
         }
        </style>
    </head>
    <body>
    <div>
        <img src="images/6.jpg" alt=""/>
        <img src="images/5.jpg" alt=""/>
        <img src="images/4.jpg" alt=""/>
        <img src="images/3.jpg" alt=""/>
        <img src="images/2.jpg" alt=""/>
        <img src="images/1.jpg" alt=""/>
    </div>
    </body>
    </html>

动画效果：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>dashu</title>
        <link rel="shortcut icon" href="dd.ico"  type="image/x-icon"/>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background-color: #ff3040;
            }
            div {
                width: 440px;
                margin: 100px auto;
            }
            div img {
                transition: all 1s;
            }
            div img:nth-child(1) {
                transform: translate(200px,-100px) rotate(60deg);
            }
            div img:nth-child(2) {
                transform: translate(-300px,-150px) rotate(90deg);
            }
            div img:nth-child(3) {
                  transform: translate(-100px,180px) rotate(-100deg);
            }
            div img:nth-child(4) {
                transform: translate(-80px,80px) rotate(125deg);
            }
            div img:nth-child(5) {
                transform: translate(200px,-100px) rotate(150deg);
            }
            div img:nth-child(6) {
                transform: translate(180px,180px) rotate(180deg);
            }
            div img:nth-child(7) {
                transform: translate(120px,120px) rotate(120deg);
            }
            div img:nth-child(8) {
                transform: translate(130px,140px) rotate(150deg);
            }
            div img:nth-child(9) {
                transform: translate(500px,-305px) rotate(390deg);
            }
            div:hover img {
                transform: none;
            }
        </style>
    </head>
    <body>
    <div>
        <img src="images/1.png" alt=""/>
        <img src="images/2.png" alt=""/>
        <img src="images/3.png" alt=""/>
        <img src="images/4.png" alt=""/>
        <img src="images/5.png" alt=""/>
        <img src="images/6.png" alt=""/>
        <img src="images/7.png" alt=""/>
        <img src="images/8.png" alt=""/>
        <img src="images/9.png" alt=""/>
    </div>
    </body>
    </html>

// 导航
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>3d导航</title>
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
        ul {
          list-style: none;
          margin: 90px auto;
          width: 800px;
        }
        ul li {
          width: 120px;
          height: 50px;
          float: left;
          position: relative;
          transform-style:preserve-3d; 
          transition: transform 1s;     
        }
        li a {
          position: absolute;
          text-decoration: none;
          text-align: center; 
          line-height: 50px;
          color: #fff;
          text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        
        li a:first-child {
          transform: translateZ(25px);
          background-color: #ff5544;
        }
        li a:last-child {
          background-color: skyblue;
          transform: rotateX(-90deg) translateZ( 25px );
        }
        li:hover {
          transform: rotateX(90deg);
        }
      </style>
    </head>
    <body>
      <ul>
        <li>
         <a href="#">1</a>
         <a href="#">2</a>
        </li>
        <li>
         <a href="#">1</a>
         <a href="#">2</a>
        </li><li>
         <a href="#">1</a>
         <a href="#">2</a>
        </li><li>
         <a href="#">1</a>
         <a href="#">2</a>
        </li><li>
         <a href="#">1</a>
         <a href="#">2</a>
        </li>
      </ul>
    </body>
    </html>

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>dashu</title>
        <style>
            section {
                width: 450px;
                height: 300px;
                border: 1px solid #000;
                margin: 100px auto;
                background: url(images/3.jpg) no-repeat;
                position: relative;
                perspective: 1000px;
            }
            .door-l, .door-r {
                position: absolute;
                top: 0;
                width: 50%;
                height: 100%;
                background-color: pink;
                transition: all 1s; 
                background: url(images/bg.png);
    
    
            }
            .door-l {
                left: 0;
                border-right: 1px solid #000;
                transform-origin: left;
            }
            .door-r {
                right: 0;
                left: 1px solid #000;
                transform-origin: right;
            }
            .door-l::before, .door-r::before {  
                content: '';
                position: absolute;
                top: 50%;
                width: 20px;
                height: 20px;
                border: 1px solid #000;
                border-radius: 50%; 
                transform：translateY(-50%); 
            }
            .door-l::before {
                right: 5px;
            }
            .door-r::before {
                left: 5px;
            }
     
            section:hover .door-l {
                transform: rotateY(-130deg); 
            }
            section:hover .door-r {
                transform: rotateY(130deg);
            }
        </style>
    </head>
    <body>
    <section>
        <div class="door-l"></div>
        <div class="door-r"></div>
    </section>
    </body>
    </html>

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>dashu</title>
        <style>
            div {
                width: 224px;
                height: 224px;
                margin: 100px auto;
                position: relative;
            }
            div img {
                position: absolute;
                top: 0;
                left: 0;
                transition: all 1s;
    
            }
            div img:first-child {
                z-index: 1;
                backface-visibility: hidden;
            }
            div:hover img {
                transform: rotateY(180deg);
            }
        </style>
    </head>
    <body>
    <div>
        <img src="images/qian.svg" alt=""/>
        <img src="images/hou.svg" alt=""/>
    </div>
    </body>
    </html>

旋转：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>dashu</title>
        <style>
            body {
                perspective: 500px;
            }
    
            div {
                width: 100px;
                height: 100px;
                background-color: #ff3040;
                transition: all 1s;
                margin: 200px auto;
                transform-origin: 50px 50px;
            }
    
            div:hover {
                background-color: skyblue;
                transform: rotateY(180deg);
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>dashu</title>
        <style>
            a {
                float: left;
                width: 183px;
                height: 130px;
                overflow: hidden;
                margin: 10px;
            }
            
            img {
                width: 193px;
                height: 130px;
                transition: margin-left 0.4s;
            }
            
            a:hover img {
                margin-left: -10px;
            }
        </style>
    </head>
    
    <body>
        <div>
            <a href="#"><img src="images/1.jpg" alt=""></a>
            <a href="#"><img src="images/2.jpg" alt=""></a>
            <a href="#"><img src="images/3.jpg" alt=""></a>
        </div>
    </body>
    
    </html>

3d:

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
    		<style>
    		body {
    			perspective: 1000px;
    		}
    		div {
    			width: 100px;
    			height: 145px;
    			border: 5px solid red;
    			margin: 100px auto;
    			transform: rotateY(30deg);
    			transform-style: preserve-3d; 
    		}
    		div img {
    			transform: rotateY(30deg);
    			border: 5px solid blue;
    		}
    		</style>
        </head>
        <body>
    	<div>
    		<img src="images/1.png"  width="100" alt="">
    	</div>
        </body>
    </html>

案例：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
            body {
            	perspective: 1000px;
            }
    		section {
    			width: 300px;
    			height: 200px;
    			margin: 100px auto;
    			background: url(images/img2.jpg) no-repeat;
    			background-size: cover;
    			position: relative;
    			transform-style: preserve-3d; 
    			transition:  5s linear;  
    		}
    		section:hover {
    			transform: rotateY(360deg);
    		}
    		section div {
    			width: 100%;
    			height: 100%;
    			background: url(images/2.gif) no-repeat;
    			background-size: cover;
    			position: absolute;
    			top: 0;
    			left: 0;
    		}
    		section div:nth-child(1) {
    			transform: rotateY(0deg)  translateZ(400px);
    		}
    		section div:nth-child(2) {
    			transform: rotateY(60deg)  translateZ(400px);
    		}
    		section div:nth-child(3) {
    			transform: rotateY(120deg)  translateZ(400px);
    		}
    		section div:nth-child(4) {
    			transform: rotateY(180deg)  translateZ(400px);
    		}
    		section div:nth-child(5) {
    			transform: rotateY(240deg)  translateZ(400px);
    		}
    		section div:nth-child(6) {
    			transform: rotateY(300deg)  translateZ(400px);
    		}
            </style>
        </head>
        <body>
    	<section>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    	</section>
        </body>
    </html>

// 半圆
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>dashu</title>
    	<style type="text/css">
    	div{
    		width: 300px;
    		height: 300px;
    		background: pink;
    		border-radius: 0  0 300px 0;
    	}
    	</style>
    </head>
    <body>
    	<div></div>
    </body>
    </html>

// snow
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>dashu</title>
    	<style type="text/css">
    	body{
    		background-color: #000;
    	}
    	div{
    		width: 8px;
    		height: 8px;
    		background-color: #fff;
    		margin:200px;
    		border-radius: 50%;
    		transform-origin:-60px 0;
    		-webkit-animation:dd 4s linear infinite;
    	}
    	  @-webkit-keyframes dd{
    	  		0%{
    	  			transform:translate3d(0,0,0) rotate(0deg);
    	  		}
    	  		100%{
    	  			transform:translate3d(0,400px,0) rotate(360deg);
    	  		}
    	  }
    	</style>
    </head>
    <body>
    	<div></div>
    </body>
    </html>

音乐盒

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>dashu</title>
    	<style type="text/css">
    	body{
    		background: pink;
    	}
    	.box{
    		width: 300px;
    		height: 300px;
    		margin:100px auto;
    		position: relative;
    	}
    	.ro{
    		-webkit-animation:qq 4s linear infinite;
    	}
        @-webkit-keyframes qq{
        	from{
        		transform:rotate(0deg);
        	}
        	to{
        		transform:rotate(360deg);
        	}
        }
    	.top,.bottom{
    		position: absolute;
    		top:0;
    		left:0;
    		width: 100%;
    		height: 100%;
    		overflow: hidden;
    		border-radius: 50%;
    	}
    	.top{
    		transition: all 0.5s ease 0s;
    		transform-origin:bottom;
    	}
    	.music{
    		transform:rotateX(180deg);
    	}
    	</style>
    	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    	<script type="text/javascript">
    	$(document).ready(function() {
    		var flag=1;
    		$(".top").click(function(event) {
    			if(flag==1)
    			{
    				$(this).addClass('music');
    				$(".bottom").addClass('ro');
    
    				flag=0;
    				$("audio")[0].load();
    				$("audio")[0].play();
    
    			}
    			else
    			{
    				$(this).removeClass('music');
    				flag=1;
    				$("audio")[0].pause();
    				$(".bottom").removeClass('ro');
    
    
    			}
    		});
    	});
    	</script>
    </head>
    <body>
    	<audio src="music.mp3"></audio>
    	<div class="box">
    		
    		<div class="bottom"><img src="musicb.jpg" alt=""></div>
    		<div class="top"><img src="musict.jpg" alt=""></div>
    	</div>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>dashu</title>
    	<style type="text/css">
    	header{
    		width: 80%;
    		height: 300px;
    		display: -webkit-box;
    		-webkit-box-orient:vertical;
    	}
    	section{
    		-webkit-box-flex:1;
    		background: pink;
    	}
    	section:first-child{
    		background-color: blue;
    	}
    	section:last-child{
    		background-color: green;
    	}
    	section:nth-child(2)
    	{
    		-webkit-box-flex:2;
    	}
    	</style>
    </head>
    <body>
    	<header>
    		<section></section>
    		<section></section>
    		<section></section>
    	</header>
    </body>
    </html>

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

**作者简介**

**达叔**，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

![努力努力再努力Jeskson][Jeskson]

[1240]: /images/20210724/8b13324bfb9e44919f4c37ad604b5ff3.png
[Jeskson]: /images/20210724/b7fc4bc827b94e60bccc89997af4b7e2.png