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多个数字求和输出
设计思想: 首先为了能够输入数字,先引入一个类import java.util.Scanner;因为是多个数字求和,所以为了方便声明一个数组double[] num;再声明一个变量int number ...
.Net文件操作
文件操作 File类,FileInfo类.using System.IO命名空间(一)创建方法一: 1 private string path = @"F:\Text\aaa.txt&qu ...
asynchronous vs non-blocking
http://stackoverflow.com/questions/2625493/asynchronous-vs-non-blocking In many circumstances they a ...
EnumWindows function
https://msdn.microsoft.com/en-us/library/windows/desktop/ms633497(v=vs.85).aspx Enumerates all top-l ...
JAVA排序--[冒泡排序]
package com.array; public class Sort_MaoPao { /** * 项目名称:冒泡排序 * 项目要求:用JAVA对数组进行排序,并运用冒泡排序算法 * 作者:Sev ...
CUBRID学习笔记 39 net使用dataset 返回查询的数据
using CUBRID.Data.CUBRIDClient; namespace DataSetExample { class Program { static ...
read 读取文件内容
文件名 test28.sh #!/bin bash # reading data from a file count= cat test | while read line do echo " ...
shift移动变量
1.移动变量脚本 sh05.sh #!/bin/bash # Program # Program shows the effect of shift function # History: # // ...
Java初始化（构造器）
在类的内部,变量定义的先后顺序决定了初始化的顺序.即使变量定义散布于方法定义之间,它们仍旧会在任何方法(包括构造器)被调用之前得到初始化. import static humeng.com.cnblo ...
JAVA 大数据内存耗用测试
JAVA 大数据内存耗用测试import java.lang.management.ManagementFactory;import java.lang.management.MemoryMXBean ...

3D变形旋转

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

随机推荐

热门专题