.rotate-demo {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("http://images2015.cnblogs.com/blog/171569/201702/171569-20170208151443229-2044520835.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;
}
.rotate-demo:hover {
-webkit-transform: rotatez(360deg);
-moz-transform: rotatez(360deg);
-o-transform: rotatez(360deg);
-ms-transform: rotatez(360deg);
transform: rotatez(360deg);
}
.img-container {
background-color: #000;
width: 220px;
height: 220px;
margin: 20px auto;
}

.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;
}

.img img {
padding: 1px;
border-radius: 10px;
border: 1px solid #fff;
}

.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;
}
.carousel-container {
margin: 20px auto;
width: 210px;
height: 140px;
position: relative;
}

#carousel {
width: 100%;
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: 186px;
height: 116px;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 1px black;
}

#carousel figure:nth-child(1) {
transform: rotatey(0deg) translatez(288px);
}

#carousel figure:nth-child(2) {
transform: rotatey(40deg) translatez(288px);
}

#carousel figure:nth-child(3) {
transform: rotatey(80deg) translatez(288px);
}

#carousel figure:nth-child(4) {
transform: rotatey(120deg) translatez(288px);
}

#carousel figure:nth-child(5) {
transform: rotatey(160deg) translatez(288px);
}

#carousel figure:nth-child(6) {
transform: rotatey(200deg) translatez(288px);
}

#carousel figure:nth-child(7) {
transform: rotatey(240deg) translatez(288px);
}

#carousel figure:nth-child(8) {
transform: rotatey(280deg) translatez(288px);
}

#carousel figure:nth-child(9) {
transform: rotatey(320deg) translatez(288px);
}

#carousel .carousel-img {
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
border: none;
}

#carousel .carousel-img:hover {
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}

@keyframes rotation {
from {
transform: rotatey(0deg);
}

to {
transform: rotatey(360deg);
}
}

  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;

            }

     

                .rotate-demo:hover {

                    -webkit-transform: rotateZ(360deg);

                    -moz-transform: rotateZ(360deg);

                    -o-transform: rotateZ(360deg);

                    -ms-transform: rotateZ(360deg);

                    transform: rotateZ(360deg);

                }

        </style>

     

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


    知识点：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;

        }

     

        .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;

        }

     

            .img img {

                padding: 1px;

                border-radius: 10px;

                border: 1px solid #fff;

            }

     

            .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>

     

    HTML：

    <div class="img-container">

                <div class="img">

                    <img src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208151443229-2044520835.jpg">

                </div>

            </div>

    知识点： 同样用到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;

            }

     

            #carousel {

                width: 100%;

                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: 186px;

                    height: 116px;

                    left: 10px;

                    top: 10px;

                    background: black;

                    overflow: hidden;

                    border: solid 1px black;

                }

     

                    #carousel figure:nth-child(1) {

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

                    }

     

                    #carousel figure:nth-child(2) {

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

                    }

     

                    #carousel figure:nth-child(3) {

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

                    }

     

                    #carousel figure:nth-child(4) {

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

                    }

     

                    #carousel figure:nth-child(5) {

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

                    }

     

                    #carousel figure:nth-child(6) {

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

                    }

     

                    #carousel figure:nth-child(7) {

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

                    }

     

                    #carousel figure:nth-child(8) {

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

                    }

     

                    #carousel figure:nth-child(9) {

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

                    }

     

                #carousel .carousel-img {

                    -webkit-filter: grayscale(1);

                    cursor: pointer;

                    transition: all .5s ease;

                    border: none;

                }

     

                    #carousel .carousel-img:hover {

                        -webkit-filter: grayscale(0);

                        transform: scale(1.2,1.2);

                    }

     

            @keyframes rotation {

                from {

                    transform: rotateY(0deg);

                }

     

                to {

                    transform: rotateY(360deg);

                }

            }

        </style>

     

    HTML:

     

    <div class="carousel-container">

            <div id="carousel">

                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155254932-406125762.jpg" alt=""></figure>

                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155256635-1168577244.jpg" alt=""></figure>

                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155257354-505827798.jpg" alt=""></figure>

                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155258072-866130501.jpg" alt=""></figure>

                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155258697-1207588864.jpg" alt=""></figure>

                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155259244-459311473.jpg" alt=""></figure>

                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155300213-66837727.jpg" alt=""></figure>

                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155300760-2026101054.jpg" alt=""></figure>

                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155301322-1264968106.jpg" alt=""></figure>

            </div>

        </div>

    知识点: 还是凭借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（动画从头到尾的速度是相同的）

刚开工，暂时没有任务，不想码代码，翻了翻以前下载的各种代码，整理整理，发现真的不知道自己怎么有那么多精力收集了那么多乱七八糟的东西，现在整理起来又要花费大量的时间！

感想：

“只要我不醒来，世界就不存在”；

其实我们从来不会错过什么，遇到了是缘，没有遇到，其实相对来说ta就是没有存在过！

2017，简简单单就好！

纯Css3手工打造网页图片效果的更多相关文章

  1. 纯CSS3实现的动感菜单效果

    1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...

  2. 【CSS】纯css实现立体摆放图片效果

    1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

  3. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  4. 9种纯CSS3人物信息卡片动态展示效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  5. 纯CSS3实现常见多种相册效果

    本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...

  6. 纯CSS3实现轮播切换效果

    使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...

  7. css3实现非矩形图片效果

    经常在网站上看到有一些非矩形的图片展示.在以前可能我会毫不犹豫的直接放上张处理好的图片.但是这样的话确实有些不太友好.每每需要换图的时候,都要去开图像处理软件也是蛮拼的.自从有了css3的选装,妈妈就 ...

  8. 纯css3代码写无缝滚动效果

    主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...

  9. 纯css3实现文字间歇滚动效果

    场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...

随机推荐

  1. rtmp聊天相关归总

    使用共享对象(SharedObject)来开发时时文字聊天其实是很简单的. SharedObject可以跟踪和广播消息,连接到SharedObject中的其中任何一个客户端改变了SharedObjec ...

  2. requesth获取参数

    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) t ...

  3. Eclipse debug 的 drop to frame 的技巧

    前些天和同事交流调试技巧时,知道了 Eclipse debug 时有个 drop to frame 的技巧.这是我以前不知道的,自己又查了一下这个功能的含义.官方的解释是: Select the Dr ...

  4. 出现The folder is already a source folder

    右键build path -> configure build path -> source ,选择 src/main/java.src/test/java删除,然后再新建.

  5. Linux任务前后台的切换（转）

    Linux任务前后台的切换   Shell支持作用控制,有以下命令实现前后台切换: 1. command& 让进程在后台运行 2. jobs 查看后台运行的进程 3. fg %n 让后台运行的 ...

  6. PHP笔试题及答案

    1.表单提交get和post有何区别? 答:get的方式是把数据在地址栏中发送,get传送的数据量较小,不能大于2KB.post传送的数据量较大,一般被默认为不受限制.但理论上,IIS4中最大量为80 ...

  7. SQLSERVER2012误删数据恢复过程

    由于长时间从事企业应用系统开发,前往用户现场升级.调试系统是比较常做的事情,但是就在周一,由于同事的失误在毫无知觉的情况下误删了生产数据库几乎所有的数据.当我发现的那一刻,感觉头发都立起来了,心想这他 ...

  8. 五分钟带你入门TensorFlow

    TensorFlow是Google开源的一款人工智能学习系统.为什么叫这个名字呢?Tensor的意思是张量,代表N维数组:Flow的意思是流,代表基于数据流图的计算.把N维数字从流图的一端流动到另一端 ...

  9. c++ 享元模式（flyweight）

    举个围棋的例子,围棋的棋盘共有361格,即可放361个棋子.现在要实现一个围棋程 序,该怎么办呢?首先要考虑的是棋子棋盘的实现,可以定义一个棋子的类,成员变量包括棋子的颜色.形状.位置等信息,另外再定 ...

  10. 543. Diameter of Binary Tree 二叉树的最大直径

    ［抄题］: Given a binary tree, you need to compute the length of the diameter of the tree. The diameter ...