.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. spring boot 项目打包到maven仓库供其它模块使用

    在对spring boot项目进行打包发布的时候发现其它spring boot项目服务真正引用使用该spring boot包中的类 需对打包插件做如下修改: <build> <plu ...

  2. SYN Flood 防范

    简介: SYN Flood 是 DoS( 拒绝服务攻击 )与 DDoS( 分布式拒绝服务攻击 )的方式之一,这是一种利用 TCP 协议缺陷,发送大量伪造 TCP 连接请求,从而使得服务器资源耗尽( C ...

  3. Java 循环遍历删除set list中的元素

    删除List和Set中的某些元素 错误代码的写法: Set<String> set = new HashSet<String>(); set.add("aaaaaa& ...

  4. C#登陆界面学习编写 2018.08.03

    简单的登陆界面的编写,在编写如下界面时,设置错误次数上限需要用到静态变量 public static int count;//计算错误次数(为静态变量) 可以防止点击登陆后次数被清空,在登陆后打开新的 ...

  5. keepalived之vrrp_script详解

    通常情况下,利用keepalived做热备,其中一台设置为master,一台设置为backup.当master出现异常后,backup自动切换为master.当backup成为master后,mast ...

  6. 使用BlendingTexture实现简单的Terrain

    [使用BlendingTexture实现简单的Terrain] BlendingTexture,就是一张纹理,纹理内存储的数据用于其它去处的Alpha通道value.例如以下四张图需要混合在Terra ...

  7. Nginx 源码完全注释（10）ngx_radix_tree

    ngx_radix_tree.h // 未被使用的节点 #define NGX_RADIX_NO_VALUE (uintptr_t) -1 typedef struct ngx_radix_node_ ...

  8. Nginx源码完全注释（8）ngx_errno.c

    errno.h中的strerror(int errno)可以确定指定的errno的错误的提示信息.在 Nginx 中,将所有错误提示信息预先存储在一个数组里,而预先确定这个数组的大小,是在自动化脚本中 ...

  9. 代码质量检测-Sonar

    一. Sonar简介 sonarqube系统是一个代码质量检测工具 由以下四个组件组成(https://docs.sonarqube.org/display/SONAR/Architecture+an ...

  10. Linux版本信息如何查询

    1.输入"uname -a ",可显示电脑以及操作系统的相关信息.2.输入"cat /proc/version",说明正在运行的内核版本.3.输入"c ...