CSS3制作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 {

  -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: 0px 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="http://img.mukewang.com/545b1e900001db6d04630253.png" />

                <span class="information">

                <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>

CSS3制作3D旋转视频展示区的更多相关文章

制作3D旋转视频展示区
CSS3 3D变形制作视频展示区 <!doctype html> <html lang="en"> <head> <meta charse ...
CSS3特效----制作3D旋转照片展示区
任务一.制作多背景提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204, ...
css3作3D旋转视频展示
代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
css3制作3d旋转相册
此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...
短视频：用快影制作3D音乐视频
用快影制作3D音乐视频1打开快影点击开始剪辑导入一张风景照片,按住照片向后拉到自己需要的时长2点击画中画,点击新增,画中画,导入一张照片3点击模板,选择圆形,调整圆形的大小,摆放到上面合适的位置,按照 ...
用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
css3之3D 旋转立方体与哆啦A梦
主要记录两个css3 3D转换的示例㈠哆啦A梦三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...

随机推荐

昂达v981平板刷机教程连接
http://tieba.baidu.com/p/3721193574 http://www.ondabbs.cn/forum.php?mod=viewthread&tid=65393 htt ...
Django 05 自定义过滤器、自定义标签
Django 05 自定义过滤器.自定义标签一.自定义过滤器 #1.在项目目录下创建一个python package包取名为common(这个名字可以自定义) #2.在common目录下创建一个t ...
C语言中复杂的声明
C允许用户自定义数据形式. 虽然我们常用一些简单的数据形式,但是根据需要有时候会用到复杂的形式. 那么久会涉及定义一些复杂的声明.定义复杂声明之前,就必须能看懂复杂的声明. 这就需要了解一些规则和约定 ...
System.Collections.Generic.List<T> 与 System.Collections.ArrayList
[推荐] System.Collections.Generic.List<T> [原因] 泛型集合类List<T>在操作值类型的集合时可以不进行装箱/拆箱处理. 使得性能较 ...
vue学习—组件的定义注册
组件的定义注册效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <b ...
Object与String
Object转为String的几种形式在java项目的实际开发和应用中,常常需要用到将对象转为String这一基本功能.本文将对常用的转换方法进行一个总结.常用的方法有Object.toString ...
SSL证书切换
SSL证书:SSL证书是数字证书的一种,类似于驾驶证.护照和营业执照的电子副本.因为配置在服务器上,也称为SSL服务器证书.SSL 证书就是遵守 SSL协议,由受信任的数字证书颁发机构CA,在验证服务 ...
Java-IO读写文件简单操作
Java中读写文件的关键在于节点流和处理流的的选取上,而节点流和处理流又分为面向字节.面向字符两种处理模式,因此,需要根据实际的情况选择合适的处理模式,一般而言,往往尽量尝试使用面向字符的处理模式,如 ...
maya2014无法安装卸载激活失败
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
Unity 物体旋转会发生变形
当游戏对象的 "父物体们" 有一个是缩放的,也就是Scale不是(1,1,1)的时候,旋转这个游戏对象它就会出现变形的现象.

CSS3制作3D旋转视频展示区

CSS3制作3D旋转视频展示区的更多相关文章

随机推荐

热门专题