3D旋转效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Document</title>
<style>
        body {
            margin-top: 5em;
            text-align: center;
        color: #414142;
        background: rgb(246,241,232);
        任务一、制作多背景
        background-image: -mz-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
         background-image: -webkit-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
         background-image: radial-gradient( farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
            background-size: cover;
        任务二、控制背景图像尺寸

        }

        h1, em, #information {
            display: block;
        font-size: 25px;
        font-weight: normal;
        margin: 2em auto;
        }

        a {
            color: #414142;
        font-style: normal;
        text-decoration: none;
        font-size: 20px;
        }

        a:hover {
            text-decoration: underline;
        }

        #container {
        margin: 0 auto;
        width: 1024px;
        }

        .wrapper {
            display: inline-block;
        width: 310px;
            height: 100px;
        vertical-align: top;
        margin: 1em 1.5em 2em 0;
        cursor: pointer;
        position: relative;
        font-family: Tahoma, Arial;
        -webkit-perspective: 4000px;
        -moz-perspective: 4000px;
        -ms-perspective: 4000px;
        -o-perspective: 4000px;
        perspective: 4000px;
        }

        .item {
            height: 100px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        任务三、给每个列表项添加过渡动画效果
        -webkit-transition: -webkit-transform .6s;
         -moz-transition: -moz-transform .6s;
         -ms-transition: -ms-transform .6s;
         -o-transition: -o-transform .6s;
         transition: transform .6s;
        }

        .item:hover {
        任务四、悬浮状态改变每个列表项的transform效果
            -webkit-transform: translateZ(-50px) rotateX(95deg);
            -moz-transform: translateZ(-50px) rotateX(95deg);
            -ms-transform: translateZ(-50px) rotateX(95deg);
            -o-transform: translateZ(-50px) rotateX(95deg);
            transform: translateZ(-50px) rotateX(95deg);
        }

        .item img {
            display: block;
            position: absolute;
            top: 0;
            任务五、设置列表项图片的圆角和阴影效果
            border-radius:10px；
            box-shadow:4px 2px 6px #333333;

-webkit-transform: translateZ(50px);
           -moz-transform: translateZ(50px);
           -ms-transform: translateZ(50px);
           -o-transform: translateZ(50px);
           transform: translateZ(50px);
           -webkit-transition: all .6s;
           -moz-transition: all .6s;
           -ms-transition: all .6s;
           -o-transition: all .6s;
           transition: all .6s;
           width: 310px;
           height: 100px;
         }

        .item .information {
           display: block;
           position: absolute;
           top: 0;
           height: 80px;
           width: 290px;
           text-align: left;
           border-radius: 15px;
           padding: 10px;
           font-size: 12px;
           text-shadow: 1px 1px1px rgba(255,255,255,0.5);
           box-shadow: none;
           background: rgb(236,241,244);
           任务六、给底层显示文本的层级设置渐变效果
            background: -webkit-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
            background: -ms-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
            background: linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);

-webkit-transform: rotateX(-90deg) translateZ(50px);
            -moz-transform: rotateX(-90deg) translateZ(50px);
            -ms-transform: rotateX(-90deg) translateZ(50px);
            -o-transform: rotateX(-90deg) translateZ(50px);
            transform: rotateX(-90deg) translateZ(50px);
            -webkit-transition: all .6s;
            -moz-transition: all .6s;
            -ms-transition: all .6s;
            -o-transition: all .6s;
            transition: all .6s;
         }

        .information strong {
           display: block;
           margin: .2em 0 .5em 0;
           font-size: 20px;
           font-family: "Oleo Script";
          }
        .item:hover img {
        任务七、列表项悬浮状态时，去掉图片的阴影效果
            border-radius: 15px;
            box-shadow：none；
        }

        .item:hover .information {
            box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
            border-radius: 3px;
         }
</style>
</head>
<body>
<div id="container">
    <h1>CSS3 3D变形制作视频展示区</h1>
    <div class="wrapper">
         <div class="item">
            <img src="http://img.mukewang.com/545b1e900001db6d04630253.png" />
            <span class="information">
            <strong>澳门风云</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.
            </span>
        </div>
    </div>

    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1eb20001ed6a03360201.png" />
            <span class="information">
            <strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
            </span>
        </div>
    </div>

    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1eef0001c62903830217.png" />
            <span class="information">
            <strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警•佐原夏辉（佐藤健饰）被分配到银座警察
            </span>
        </div>
    </div>

    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1f4e0001f90c02850210.png" />
            <span class="information">
            <strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
            </span>
        </div>
    </div>
    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1f5500017d5603190214.png" />
            <span class="information">
            <strong>红眼</strong>1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。
            </span>
        </div>
    </div>
    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1f620001874503500209.png" />
            <span class="information">
            <strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。
            </span>
        </div>
    </div>
</div>
</body>
</html>

3D旋转效果的更多相关文章

css3 3D旋转效果
css3 record2 css3 3D旋转效果需理解transform css3知识: keyframes transform perspective jsfiddle demo keyframe ...
好玩的WPF第四弹：用Viewport2DVisual3D实现3D旋转效果
原文:好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https:// ...
Css3动画（一）如何画3D旋转效果或者卫星围绕旋转效果
如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说 ...
实现3D旋转效果的方法
Android中有一种旋转效果,是将一个图片进行360度的旋转. Matrix的作用是对平面上的View进行缩放.平移.旋转,每一种操作都配了setXXX.preXXX.postXXX三个函数. Ca ...
基于CSS3的3D旋转效果
自从有了html5和css3,好多以前只能想想的华丽效果都可以上手实现了.3D 转换(个人认为3D变换更贴切^)就是其中之一.关于3D转换,可以阅读CSS3 3D transform变换,不过如此,文 ...
用js写的比较简单3D旋转效果
HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
android 3D旋转效果实现
一说到3D,可能第一反应就是使用OpenGL ES....但是,实现这么个小功能,要动用这玩意,莫名的恐惧啊!!!!至今也没弄明白这个怎么玩... 好吧,幸亏还有个Camera类可以帮助我们,据说底层 ...
js 3D旋转效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
程序员用HTML5给女朋友制作的3D相册
程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近.程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的.本相册使用了HTML5的画布技术,需要谷歌 ...

随机推荐

hanlp的基本使用--python(自然语言处理)
hanlp拥有:中文分词.命名实体识别.摘要关键字.依存句法分析.简繁拼音转换.智能推荐. 这里主要介绍一下hanlp的中文分词.命名实体识别.依存句法分析,这里就不介绍具体的hanlp的安装了,百度 ...
在Mac OS X上启用Apache和PHP
因为Mac OS X上都已自带了Apache和PHP,所以都无需进行安装,只要按照自己的需要进行设置即可. 找到httpd.conf文件,并用编辑器打开. 加载PHP模块.找到 #LoadModule ...
白月黑羽Python在线教程
推荐白月黑羽Python在线教程白月黑羽站在初学者的角度为大家安排了Python学习教程,帮助大家迅速掌握程序开发技能. http://www.python3.vip/doc/tutorial/p ...
wap尝试调取app（网易新闻为例）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
IndexDB的基本操作
1.前端存储的一个数据库. 2.介绍一下基本操作. <!DOCTYPE html> <html> <head> <meta charset="UTF ...
WPF Style和Template
WPF中的Style类似于Web应用程序中的CSS,它是控件的一个属性,属于资源的一种. ControlTemplate和DataTemplate区别: ControlTemplate用于改变控件原来 ...
Linux-(diff)
diff 命令 1．命令格式: diff [参数] [文件1或目录1] [文件2或目录2] 2．命令功能: diff命令能比较单个文件或者目录内容.如果指定比较的是文件,则只有当输入为文本文件时 ...
MySQL中date类型的空值0000-00-00和00:00:00
1.如果mysql中使用了date类型,并且默认值为'0000-00-00', 那么数据库中的'0000-00-00 00:00:00', '0000-00-00', '00:00:00'这三个值是相 ...
Rails中的增删改查
1. rails中类与对象与SQL中表与行的关系 rails中提供了对象关系映射(ORM),将模型类映射至表,模型类的关联表名是类名小写后的复数形式,如类名Order,对应的表名为o ...
Mybatis中同时使用shardbatis和pagehelper插件冲突问题
在一次使用mybatis的插件,分表shardbatis+分页pagehelper共同使用的时候,会抛出以下异常: java.lang.NoSuchMethodError: net.sf.jsqlpa ...

3D旋转效果

3D旋转效果的更多相关文章

随机推荐

热门专题