3D变形旋转

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body {

            margin-top: 5em;

            text-align: center;

            color: #414142;

            background: rgb(246,241,232);

            /*background-image: -ms-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 {

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

            box-shadow: 0 3px 8px rgba(0,0,0,0.3);

            -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 1px 1px 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 {

            box-shadow: none;

            border-radius: 15px;

        }

        .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="data:image/xy_3.png"/>

            <span class="information">

              <strong>澳门风云</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.

            </span>

        </div>

    </div>

    <!--<div class="wrapper">

        <div class="item">

            <img src="data:image/xy_3.png"/>

            <span class="information">

              <strong>改过迁善</strong> 该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。

            </span>

        </div>

    </div>

    <div class="wrapper">

        <div class="item">

            <img src="data:image/xy_3.png"/>

            <span class="information">

              <strong>父子刑警</strong> 本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警·佐原夏辉（佐藤健饰）被分配到银座警察

            </span>

        </div>

    </div>

    <div class="wrapper">

        <div class="item">

            <img src="data:image/xy_3.png"/>

            <span class="information">

              <strong>果宝特攻3</strong> 果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界

            </span>

        </div>

    </div>

    <div class="wrapper">

        <div class="item">

            <img src="data:image/xy_3.png"/>

            <span class="information">

              <strong>红眼</strong>1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。

            </span>

        </div>

    </div>

    <div class="wrapper">

        <div class="item">

            <img src="data:image/xy_3.png"/>

            <span class="information">

              <strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。

            </span>

        </div>

    </div>-->

</div>

</body>

</html>

3D变形旋转的更多相关文章

css3-实现3D立方体旋转
核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. ...
css3 3D变形入门（一）
css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...
关于transform的3D变形函数
继续transform的3D用法: translate3d(x,y,z)定义3D转换 transformX(x)只用x轴的值进行转换: transformY(y)只用y轴的值进行转换: transfo ...
[Swift通天遁地]九、拔剑吧-(15)搭建具有滑出、视差、3D变形等切换效果的引导页
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
9.css3动画-2D/3D变形--trasform
transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...
CSS3——2D变形和3D变形
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...
jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
2d,3d中旋转推导
二维绕原点旋转,其实点为(x,y),旋转角度为黄色标注的角度. 推导过程如下: x' = r cos(al+be); y' = r sin(al+be);x '= rcosalcosbe-rsinal ...
基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

随机推荐

批量修改文件夹及文件用户权限和用户组权限 centos
chown -R www * 批量修改目录下所有文件,用户为www chown -R :www * 批量修改目录下所有文件,用户组为www
mysql正则匹配解决查询一个字段是否在另一个字段中
select b.filter_name , count(*) from at_goods a , at_search_filter bwhere a.application REGEXP b.fil ...
oracle分组统计某列逗号隔开数据
所有版本的oracle都可以使用select wm_concat(name) as name from user; 但如果是oracle11g,使用select listagg(name, ',') ...
MSChart BarChart
不让合并0-5 chart1.ChartAreas[].AxisX.LabelStyle.Interval = ; 效果
ajax接收返回值获取不到问题
function testAsync() { //定义一个全局变量来接受$post的返回值 var result; //用ajax的“同步方式”调用一般处理程序 $.ajax({ url: " ...
屏幕序列Screen Sequences
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
POJ 1979 Red and Black （红与黑）
POJ 1979 Red and Black (红与黑) Time Limit: 1000MS Memory Limit: 30000K Description 题目描述 There is a ...
Python基础学习笔记（十）日期Calendar和时间Timer
参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-date-time.html 3. http://www.liao ...
Html、Css-----当有文字和图片的时候，需要文字和图片居中，怎么实现？不想文字换行怎么设置
1 当有文字和图片的时候,需要文字和图片居中,怎么实现? <a href=#" target="aa" style="white-space:nowrap ...
myeclipse10.05安装aptana
安装步骤: 1.下载aptana3.2 Eclipse Plugin插件. 下载地址:http://update1.aptana.org/studio/3.2/024747/index.html 2. ...

3D变形旋转

3D变形旋转的更多相关文章

随机推荐

热门专题