3D立体旋转

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            perspective: 1000px;
        }
        .one{
            position: relative;
            width: 200px;
            margin:150px auto;
            transform-style: preserve-3d;
            transform: rotateX(-45deg) rotateY(45deg);
            /*animation: ranwanqiang 3s infinite;*/
        }

.one>div{
            position: absolute;
            width: 200px;
            height:200px;
            /*background:rgba(0,0,0,0.4);*/
            border:1px solid #999;
            /*opacity: 0.1px;*/
            color:white;
            font-size: 120px;
            text-align: center;
            line-height: 200px;
        }
        .front{
            transform:translateZ(100px);
        }
        .top {
             transform: rotateX(90deg) translateZ(100px);
        }
        .right {
            transform: rotateY(90deg) translateZ(100px);
        }
        .left {            
            transform: rotateY(-90deg) translateZ(100px);
        }
        .bottom {            
            transform: rotateX(-90deg) translateZ(100px);
        }
        .back {            
            transform: rotateY(-180deg) translateZ(100px);
}
/*@keyframes ranwanqiang{
            to{transform: rotateX(90deg);}
        }*/
    </style>
</head>
<body>
<div class="one">
      <div class="front">1</div>
      <div class="back">2</div>
      <div class="right">3</div>
      <div class="left">4</div>
      <div class="top">5</div>
      <div class="bottom">6</div>
</div>
</body>
</html>

时间: 2024-10-10 07:49:16

3D立体旋转的相关文章

从零开始打造一个Android 3D立体旋转容器

本文地址,转载请注明 http://blog.csdn.net/mr_immortalz/article/details/51918560 嗯,2个月没有写博客,是要好好反省下,趁着放暑假把这两个月看的东西好好沉淀下.嗯,就立下这个Flag,希望不要自己再打自己脸. 1.概述 回到正题,这次带来的效果,是一个Android 的3D立体旋转的效果. 当然灵感的来源,来自早些时间微博上看到的效果图. 非常酷有木有!作为程序猿我当然要把它加入我的下一个项目中啦! 原效果 我们实现的效果: (为了更加可

css3立体旋转菜单

css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/7127.html css3立体旋转菜单,布布扣,bubuko.com

jQuery可拖拽3D万花筒旋转特效

jQuery可拖拽3D万花筒旋转特效 这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovertree.com/texiao/jquery/92/ 进去后可以上下左右的拖动图片. 本示例中使用到了CSS3的transform-style 属性,该规定如何在 3D 空间中呈现被嵌套的元素. 默认值: flat继承性: no版本: CSS3JavaScript

css3-实现3D立方体旋转

核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. 实例:        创建大小两个盒子,小盒子放在大盒子里面,通过3D立体定位调整各自的位置,呈现一个立方体的现状:然后定义鼠标移入后的动画帧事件.实现如下效果图一样的模型. HTML: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <

css3立体旋转动画

demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul class="ani"> <li class="r1">1</li> <li class="r2">2</li> <li class="r3">3</li&g

Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)

本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于android默认自带的旋转动画RotateAnimation 实现立体旋转核心步骤: 1. 继承系统Animation重写applyTransformation方法 通过applyTransformation方法的回调参数 float interpolatedTime, Transformation t 来

有关3D立体的一些市场信息

去年在自动化所做实时三维重建的时候,有人来参观,看完我们的结果,问了句:你们做的这个模型很酷啊,可是具体有什么用呢?黄老师的回答把大家逗乐了:我也不知道有什么用,但是肯定很有用! 做研究的人容易只专注问题本身而忽略实际需求,这篇帖子我是从网上搜了一下,目前有关3D立体的市场上都在做什么,了解一些市场信息至少有助于增强我们研究的信心嘛. 一般做三维重建的公司都会宣称自己的产品的用处有很多,包括制图,数字娱乐,资源勘探,建筑工业,文物保护等等(点击打开链接).这个说法是当然没有问题的,有了三维模型很

纯CSS3彩色边线3D立体按钮制作教程

今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示效果,而且我们把制作教程也分享出来,首先来看看效果图: 我们也可以在这里看到这些按钮的DEMO演示. 接下来就来分享一下制作教程以及源代码,按钮的源代码主要由HTML和CSS两部分代码组成,先来看看HTML代码: <button class="blue"> <div class="wrapper"

纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效

这是一款效果非常酷的纯CSS3全屏3D立方体旋转展示幻灯片特效.该幻灯片使用全屏的3D立方体作为slide的载体,通过上下导航按钮,可以垂直旋转立方体,将立方体各个面上的幻灯片图片展示出来,效果非常炫酷. 在线预览   源码下载 使用方法 HTML结构 该幻灯片的立方体结构使用的是一个无序列表来制作,每一个<li>元素是一个立方体的面.幻灯片的上下导航按钮使用的是radio单选按钮和label来制作.整个3D立方体幻灯片被包裹在一个div容器中. 1 2 3 4 5 6 7 8 9 10 11