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

随机推荐

【Java】集合（List、Set）遍历、判断、删除元素时的小陷阱
开发中,常有场景:遍历集合,依次判断是否符合条件,如符合条件则删除当前元素. 不知不觉中,有些陷阱,不知你有没有犯. 一.漏网之鱼-for循环递增下标方式遍历集合,并删除元素如果你用for循环递增下 ...
Linux内核中的GPIO系统之（3）：pin controller driver代码分析
一.前言对于一个嵌入式软件工程师,我们的软件模块经常和硬件打交道,pin control subsystem也不例外,被它驱动的硬件叫做pin controller(一般ARM soc的datash ...
Path文件操作实例
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddProduct.asp ...
【Unity3D游戏开发】性能优化之spine提高80~90%的效率 (三一)
Spine效率低 Unity项目加载spine动画,经常会出现卡顿的情况,如游戏中瞬间播放一个动画,打开一个带spine动画的界面.尤其是SkeletonRenderer.Awake时,会瞬间出现大量 ...
How To Use RUN_PRODUCT In Oracle Forms
Run_Product is used to run Oracle Reports (RDF/REP files) in Oracle Forms. It invokes one of the sup ...
Hibernate 配置转（http://blog.csdn.net/b671900/article/details/39156065）
做项目必然要先进行数据库表设计,然后根据数据库设计建立实体类(VO),这是理所当然的,但是到公司里做项目后,让我认识到,没有说既进行完数据库设计后还要再“自己”建立一变VO.意思是,在项目设计时,要么 ...
hiho #1050 : 树中的最长路树的直径
#1050 : 树中的最长路时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述上回说到,小Ho得到了一棵二叉树玩具,这个玩具是由小球和木棍连接起来的,而在拆拼它的过程中, ...
汇编语言指令与debug命令符
•MOV与ADD指令汇编指令控制CPU完成的操作形式化语法描述 mov ax, 18 将18送入AX (AX)=18 mov ah, 78 将78送入AH (AH)=78 add ax, 8 ...
《易货》Alpha版本测试报告
一.测试计划功能需求编号功能需求名称功能需求描述测试计划 1 用户注册每一个想要发布商品或者需要购买商品的用户都需要注册一个账号 √ 2 用户登录已经拥有账号的用户登录 √ 3 密码修改 ...
linux学习笔记2-命令总结4
帮助命令 help - 帮助命令 man - 获取帮助信息用户管理命令 useradd - 添加新用户 passwd - 设置用户密码 who - 显示所有用户 w - 查看更详细的用户信息 use ...

3D变形旋转

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

随机推荐

热门专题