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及以下浏览器.效果图如下 : ...

随机推荐

【Regular Expression】常用的正则表达式
一套完善的应用程序,需要能验证用户输入的信息,从而提醒/引导用户正确地输入信息. 而验证方面,以验证所在的地方分类,可分为: 客户端验证.如果是WEB,一般由Javascript完成,主要用户引导用户 ...
六、IO流——文件
IO流1.字节流(InputStream.OutputStream)2.字符流 (Reader.Writer)3.缓冲流(BufferedInputStream.BufferedOutputStrea ...
.Net母版页
母版页:MasterPage 母版页不是独立的,它是与用户控件一起来使页面结构更加优化. 从粗到细,逐步细化各级页面的模板结构.到页面中只需完善其不同之处即可,相同之处都放在各级母版页中实现了. We ...
.Net分页实现
public partial class _Default : System.Web.UI.Page { private mydbDataContext _context = new mydbData ...
数据库SQL语句练习题10--18
10.查询Score表中的最高分的学生学号和课程号.(子查询或者排序) select t.sno,t.cno from SCORE t where degree = (select max(degre ...
ORACLE分页SQL语句
.根据ROWID来分 select * from t_xiaoxi where rowid in(select rid from (select rownum rn,rid from(select r ...
Beaglebone Black 和树莓派
我不是创客.我买了个 Beaglebone Black 来玩,主要是拿来学习. 入手前,看过好几个树莓派 (Raspi - 2 Model B)和 Beaglebone Black (BBB) 比较, ...
Nessus基本命令
/etc/init.d/nessusd start 启动nessusd服务默认端口8834 添加用户(未知是什么用户) sudo /opt/nessus/sbin/nessus-adduser
浏览器被hao.360.cn劫持怎么办
特么的现在互联网太没节操了,一大早发现我的浏览器被hao.360.cn劫持了,弄了好久都没弄好,后来一想可能是因为qvod的原因,这可是哥当年看片的神器啊…… 废话不说: 1,进入:C:\Progra ...
CALayer总结（三）
CPU VS GPU 动画和屏幕上组合的图层实际上被一个单独的进程管理,而不是你的应用程序.这个进程就是所谓的渲染服务.在iOS5和之前的版本是SpringBoard进程(同时管理着iOS的主屏).在 ...

3D变形旋转

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

随机推荐

热门专题