纯Css3手工打造网页图片效果

1. 鼠标悬停，图片360度旋转

   
   效果：

   代码：

   <style>

   登录后复制

   登录后复制

           .rotate-demo {

   登录后复制

               width: 220px;

   登录后复制

               height: 220px;

   登录后复制

               margin: 0 auto;

   登录后复制

               background: no-repeat url("images/author.jpg") left top;

   登录后复制

               -webkit-background-size: 220px 220px;

   登录后复制

               -moz-background-size: 220px 220px;

   登录后复制

               background-size: 220px 220px;

   登录后复制

               -webkit-border-radius: 110px;

   登录后复制

               border-radius: 110px;

   登录后复制

               -webkit-transition: -webkit-transform 2s ease-out;

   登录后复制

               -moz-transition: -moz-transform 2s ease-out;

   登录后复制

               -o-transition: -o-transform 2s ease-out;

   登录后复制

               -ms-transition: -ms-transform 2s ease-out;

   登录后复制

           }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               .rotate-demo:hover {

   登录后复制

                   -webkit-transform: rotateZ(360deg);

   登录后复制

                   -moz-transform: rotateZ(360deg);

   登录后复制

                   -o-transform: rotateZ(360deg);

   登录后复制

                   -ms-transform: rotateZ(360deg);

   登录后复制

                   transform: rotateZ(360deg);

   登录后复制

               }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

       </style>

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   <p class="rotate-demo"></p>

   登录后复制

   
   知识点：CSS3 的transform 属性可以向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。设置为rotateZ(angle) 实现DOM元素沿着 Z 轴的 3D 旋转，相关的设置还有rotate、rotate3d、rotateX、rotateY。

   立即学习“前端免费学习笔记（深入）”；

2. 图片悬停放大

   
   
   效果：

   

   
   代码：

   CSS3：

   登录后复制

   <style type="text/css">

   登录后复制

       .img-container {

   登录后复制

           background-color: #000;

   登录后复制

           width: 220px;

   登录后复制

           height: 220px;

   登录后复制

           margin: 20px 50px;

   登录后复制

       }

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

       .img {

   登录后复制

           -webkit-transform: scale(0.6);

   登录后复制

           -moz-transform: scale(0.6);

   登录后复制

           -o-transform: scale(0.6);

   登录后复制

           -webkit-transition-duration: 0.5s;

   登录后复制

           -moz-transition-duration: 0.5s;

   登录后复制

           -o-transition-duration: 0.5s;

   登录后复制

       }

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

           .img img {

   登录后复制

               padding: 1px;

   登录后复制

               border-radius: 10px;

   登录后复制

               border: 1px solid #fff;

   登录后复制

           }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

           .img:hover {

   登录后复制

               -webkit-transform: scale(0.8);

   登录后复制

               -webkit-box-shadow: 0px 0px 30px #ccc;

   登录后复制

               -moz-transform: scale(0.8);

   登录后复制

               -moz-box-shadow: 0px 0px 30px #ccc;

   登录后复制

               -o-transform: scale(0.8);

   登录后复制

               -o-box-shadow: 0px 0px 30px #ccc;

   登录后复制

           }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   </style>

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   HTML：

   登录后复制

   <p class="img-container">

   登录后复制

               <p class="img">

   登录后复制

                   @@##@@

   登录后复制

               </p>

   登录后复制

           </p>

   登录后复制

   登录后复制

   
   知识点： 同样用到CSS3的transform属性，设置scale(x,y)，实现DOM元素的2D缩放转换，相关的还有scale3d、scaleX、scaleY、scaleZ

3. 实现3D图片旋转相册

   效果:

   
   代码:

   CSS:

   登录后复制

   <style>

   登录后复制

   登录后复制

           .carousel-container {

   登录后复制

               margin: 20px auto;

   登录后复制

               width: 210px;

   登录后复制

               height: 140px;

   登录后复制

               position: relative;

   登录后复制

           }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

           #carousel {

   登录后复制

               width: 100%;

   登录后复制

               height: 100%;

   登录后复制

               position: absolute;

   登录后复制

               transform-style: preserve-3d;

   登录后复制

               animation: rotation 20s infinite linear;

   登录后复制

           }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               #carousel:hover {

   登录后复制

                   animation-play-state: paused;

   登录后复制

               }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               #carousel figure {

   登录后复制

                   display: block;

   登录后复制

                   position: absolute;

   登录后复制

                   width: 186px;

   登录后复制

                   height: 116px;

   登录后复制

                   left: 10px;

   登录后复制

                   top: 10px;

   登录后复制

                   background: black;

   登录后复制

                   overflow: hidden;

   登录后复制

                   border: solid 1px black;

   登录后复制

               }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

                   #carousel figure:nth-child(1) {

   登录后复制

                       transform: rotateY(0deg) translateZ(288px);

   登录后复制

                   }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

                   #carousel figure:nth-child(2) {

   登录后复制

                       transform: rotateY(40deg) translateZ(288px);

   登录后复制

                   }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

                   #carousel figure:nth-child(3) {

   登录后复制

                       transform: rotateY(80deg) translateZ(288px);

   登录后复制

                   }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

                   #carousel figure:nth-child(4) {

   登录后复制

                       transform: rotateY(120deg) translateZ(288px);

   登录后复制

                   }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

                   #carousel figure:nth-child(5) {

   登录后复制

                       transform: rotateY(160deg) translateZ(288px);

   登录后复制

                   }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

                   #carousel figure:nth-child(6) {

   登录后复制

                       transform: rotateY(200deg) translateZ(288px);

   登录后复制

                   }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

                   #carousel figure:nth-child(7) {

   登录后复制

                       transform: rotateY(240deg) translateZ(288px);

   登录后复制

                   }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

                   #carousel figure:nth-child(8) {

   登录后复制

                       transform: rotateY(280deg) translateZ(288px);

   登录后复制

                   }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

                   #carousel figure:nth-child(9) {

   登录后复制

                       transform: rotateY(320deg) translateZ(288px);

   登录后复制

                   }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               #carousel .carousel-img {

   登录后复制

                   -webkit-filter: grayscale(1);

   登录后复制

                   cursor: pointer;

   登录后复制

                   transition: all .5s ease;

   登录后复制

                   border: none;

   登录后复制

               }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

                   #carousel .carousel-img:hover {

   登录后复制

                       -webkit-filter: grayscale(0);

   登录后复制

                       transform: scale(1.2,1.2);

   登录后复制

                   }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

           @keyframes rotation {

   登录后复制

               from {

   登录后复制

                   transform: rotateY(0deg);

   登录后复制

               }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               to {

   登录后复制

                   transform: rotateY(360deg);

   登录后复制

               }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

           }

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

       </style>

   登录后复制

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   HTML:

   登录后复制

    <br/>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   <p class="carousel-container">

   登录后复制

           <p id="carousel">

   登录后复制

               <figure>@@##@@</figure>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               <figure>@@##@@</figure>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               <figure>@@##@@</figure>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               <figure>@@##@@</figure>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               <figure>@@##@@</figure>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               <figure>@@##@@</figure>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               <figure>@@##@@</figure>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               <figure>@@##@@</figure>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

               <figure>@@##@@</figure>

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

           </p>

   登录后复制

   登录后复制

       </p>

   登录后复制

   
   知识点: 还是凭借CSS3的transform属性以及animation属性，使用rotateY定义元素沿着 Y 轴的进行 3D 旋转，使用translateZ定义元素沿着Z轴进行 3D 转换；
   同时设置元素的animation属性实现动画效果，本文中定义如下：
   

   animation: rotation 20s infinite linear;

   登录后复制

   
   animation-name（需要绑定到选择器的 keyframe 名称）：rotation的动画
   animation-duration（完成动画所花费的时间）：20s
   animation-iteration-count（动画应该播放的次数）：infinite（无限次）
   animation-timing-function(动画的速度曲线)：linear（动画从头到尾的速度是相同的）

更多纯Css3手工打造网页图片效果 相关文章请关注PHP中文网！