上下前后左右盒子3D旋转

最新推荐文章于 2022-11-30 14:43:27 发布
最新推荐文章于 2022-11-30 14:43:27 发布
阅读量416 收藏
点赞数
分类专栏： # HTML CSS JS 小练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45935720/article/details/106280531
版权

#盒子3D旋转
运用transform+transition:

  1. 第一种
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 200px;
        }

        .box ul {
            list-style: none;
            width: 100%;
            height: 100%;
            /* perspective: 880px; */
            transform-style: preserve-3d;
            transition: all 10s ease;
        }

        .box ul li {
            width: 200px;
            height: 200px;
            background: rgba(255, 0, 0, .8);
            font-size: 80px;
            color: #fff;
            text-align: center;
            line-height: 200px;
            position: absolute;
        }

        .box ul li.font {
            background: rgba(50, 102, 50, 0.5);
            /* transform: translateZ(200px);也可设置为100px,后设置为-100px */
            z-index: 12;
        }

        .box ul li.back {
            background: rgba(0, 0, 255, .8);
            transform: translateZ(-200px);
            z-index: 10;
        }

        .box ul li.up {
            background: rgba(255, 0, 0, .8);
            /* transform: translateY(-200px); */
            transform-origin: bottom center;
            transform: translateY(-200px) rotateX(90deg);
        }

        .box ul li.down {
            background: rgba(255, 255, 0, .8);
            /* transform: translateY(200px); */
            transform-origin: top center;
            transform: translateY(200px) rotateX(-90deg);
        }

        .box ul li.left {
            background: rgba(255, 0, 255, .8);
            /* transform: translateX(-200px); */
            transform-origin: right center;
            transform: translateX(-200px) rotateY(-90deg);
        }

        .box ul li.right {
            background: rgba(0, 255, 255, .8);
            /* transform: translateX(200px); */
            transform-origin: left center;
            transform: translateX(200px) rotateY(90deg);
        }
        .box:hover ul{
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="font">前</li>
            <li class="back">后</li>
            <li class="up">上</li>
            <li class="down">下</li>
            <li class="left">左</li>
            <li class="right">右</li>
        </ul>
    </div>
</body>

</html>
  1. 第二种
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 200px;
        }

        .box ul {
            list-style: none;
            width: 100%;
            height: 100%;
            /* perspective: 880px; */
            transform-style: preserve-3d;
            transition: all 10s ease;
        }

        .box ul li {
            width: 200px;
            height: 200px;
            background: rgba(255, 0, 0, .8);
            font-size: 80px;
            color: #fff;
            text-align: center;
            line-height: 200px;
            position: absolute;
        }

        .box ul li.font {
            background: rgba(50, 102, 50, 0.5);
            /* transform: translateZ(200px);也可设置为100px,后设置为-100px */
            transform: translateZ(100px);
            z-index: 12;
        }

        .box ul li.back {
            background: rgba(0, 0, 255, .8);
            transform: translateZ(-100px);
            z-index: 10;
        }

        .box ul li.up {
            background: rgba(255, 0, 0, .8);
            /* transform: translateY(-200px); */
            /* transform-origin: bottom center; */
            transform: translateY(-100px) rotateX(90deg);
        }

        .box ul li.down {
            background: rgba(255, 255, 0, .8);
            /* transform: translateY(200px); */
            /* transform-origin: top center; */
            transform: translateY(100px) rotateX(-90deg);
        }

        .box ul li.left {
            background: rgba(255, 0, 255, .8);
            /* transform: translateX(-200px); */
            /* transform-origin: right center; */
            transform: translateX(-100px) rotateY(-90deg);
        }

        .box ul li.right {
            background: rgba(0, 255, 255, .8);
            /* transform: translateX(200px); */
            /* transform-origin: left center; */
            transform: translateX(100px) rotateY(90deg);
        }
        .box:hover ul{
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="font">前</li>
            <li class="back">后</li>
            <li class="up">上</li>
            <li class="down">下</li>
            <li class="left">左</li>
            <li class="right">右</li>
        </ul>
    </div>
</body>

</html>
info_foo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3D动画盒子旋转
gooutworkhard的博客
02-09 238
3D动画盒子旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
3D视频上下转化左右交织格式YUV
weixin_30783629的博客
01-23 1354
3D视频中，有的是上下格式的，但是无论是裸眼3D还是3D眼镜都需要左右格式的，下面就是转换的算法，利用ffmpeg解码，进行YUV切割，实现左右视频交织，可以在裸眼3D手机或者pad上观看3D效果。必须要先熟悉YUV数据格式。 FILE *yuvFile = fopen("yuv_file_width.yuv","ab"); if(!yuvFile) return ...
上下、左右格式3D影片用终极解码KMPlayer转红蓝、红绿的播放方法（可加载字幕）
01-31
将下面文件解压至终极码安装目录（如C:\Program Files\Final Codecs\Shader） 用Kmplayer播放3D影片，根据影片格式及使用眼镜选择方式 http://bbs.cnliti.com/attachments/day_101215/101215093273a7d1d1972e7009.jpg.thumb.jpg
上下左右格式3D影片KMPlayer转红蓝红绿播放方法
12-13
上下左右格式3D影片KMPlayer转红蓝红绿播放方法 上下左右格式3D影片KMPlayer转红蓝红绿播放方法 上下左右转红绿红蓝播放器.part1.rar 上下左右转红绿红蓝播放器.part2.rar 需要两个文件在同一文件夹下面 解压：上下左右转红绿红蓝播放器.part1.rar就可以了 FinalCodecs
网上下载的“上下3D”和“左右3D”影片该如何播放？
weixin_30527323的博客
02-21 8877
我们平常买的红蓝3D眼镜智能播放红蓝3D片源。网上找3D电影的时候，虽试图去找红蓝3D格式电影，但总会找到不少“左右格式”或者"上下格式"影片。正常播放后发现有两重画面。这种3D电影该如何播放呢? 别急。我这就来教大家播放左右/上下3D电影。 首先请下载QQ播放器，自己百度就可。QQ影音官方地址：http://player.qq.com/ 随后用QQ影音播放器打开左右/上下格式的3D电影（快...
CSS3使用过渡转换和动画实现3D旋转盒子
王飞
01-08 1256
在网络快速发展的今天，静态web页面早已经不满足人们的需求，因此我们需要更加炫酷的动画渲染页面，使得我们的页面逼格满满，在css3中动画的表现形式有过渡，2d动画和3d动画，给用户一种耳目一新的全新体验。 过渡（transition） 个人理解的过渡指的是某种元素的某种状态在一定的时间段内发生的变化叫做过渡。 div:hover{ width: 200px; height: 200px; } ...
CSS+JS实现3D盒子
暖风的博客_CSDN博客
03-24 386
1.首先必须对3d坐标足够熟悉，如下图 初始页面在xy所在页面，默认3d转换中心在图的中点。 2.我们需要构成6个页面，形成一个正方形，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" href="fk.PNG"> <title>css3D盒子</titl..
css3 3d立方体两层嵌套式原地立体旋转
chen_0214的博客
08-06 973
一.重要的属性 需要用到的属性：transform-style: preserve-3d-将当前平面从2d（默认）转化为3d， transform: perspective(400px) = perspective: 400px，不过这里做正方体的时候，发现了这俩的不同， 用第二者的时候旋转之后侧边明显轴线发生了变化， 看的时候就变样了，感兴趣可以试试。区别还是挺明显，； 这里这俩属性写了之后，子元素就可以进行旋转(rotate)，平移(translate)操作，即可看到3d平面效果。 二.着手画立方体
css3 3d效果案例：两面翻转的盒子
m0_51495354的博客
11-30 382
css3 3d效果案例：两面翻转的盒子
DIRECT3D 天空盒和实现观察和世界矩阵
11-06
1. 准备纹理：你需要六张分别对应前后左右上下的2D纹理，这些纹理通常是天空的全景图片。 2. 创建立方体贴图：将这六张纹理贴在一个立方体的六个面上，形成一个立方体模型。 3. 渲染天空盒：在渲染场景时，天空盒...
vue使用three.js实现盒子上下左右开关门的效果（进一步优化）
菜鸟karroy
06-13 2594
一、vue使用three.js实现开关门 1、实现效果 使用button按钮来控制开关门。 默认是关门状态，当点击“向左/向右/向上/向下开门”按钮时实现某个方向的开门效果，并且不需要点击“关门按钮”就能切换不同方向的开门效果；点击“关门按钮”实现关门的效果。 2、实现思路 2.1、建立一个盒子模型。 （1）定义一个Scene、PerspectiveCamera、WebGLRenderer以及包...
Css3 3D旋转图片立方体特效
fjgyh_HZwnfk的博客
03-03 586
H5里，我们会学到3D的一些动画特效。什么是3D动画特效呢？动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。 他的作用是通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 那么怎么去实现这一类的效果呢。首先就是把我们的页面，也就是舞台变为3D的舞台，不在平常的平面里做了。 通过在父元素设置transf...
CSS3实现3D透明立体盒子
GaHoOo的博客
10-19 2382
想要利用CSS3实现透明3D立体盒子 就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码 因此我设置了6个div，作为立方体的6个面 因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，因此要赋予每个面不一样的值，即不一样的位置 它才能展现出来。 .trangel div:nth-of-type(1){ left: 0; top:-10...
CSS3 之 3D转换——位移translate、透视perspective、旋转rotate、呈现transform-style
qq_43623147的博客
12-19 792
一、三维坐标系 三维直角坐标系其实是指立体空间，立体空间是由3个轴共同组成的 x轴：水平向右 x右边是正值，左边为负值 y轴：垂直向下 y下面是正值，上面是负值 z轴：垂直屏幕 往外是正值，往里面是负值 二、位移 translate transform: translateX(100px)：仅仅是在x轴上移动 transform: translateY(100px)：仅仅是在y轴上移动 transform: translateZ(100px)：仅仅是在z轴上移动 transform: tra
Unity在ipad上触屏双指上下左右移动，单指上下左右旋转
elegentbeauty的博客
03-06 2375
在ipad上触屏双指上下左右移动，单指上下左右旋转，代码如下： using UnityEngine; using System.Collections; using UnityEngine.UI; public class MoveAndScoll : MonoBehaviour { public Text text; public Transform tar; void
3D翻转翻页特效之左右翻和上下翻
wuweitiandian的专栏
01-04 4816
左右翻codepen地址： http://codepen.io/fonglezen/pen/raWGwg 上下翻codepen地址（同理）： http://codepen.io/fonglezen/pen/QwGqzz 代码直接可在codepen上浏览和下载。 基本的思路： 1、利用鼠标的滑动或者手指的滑动，来控制图片的左右3D翻滚切换，需要做终端判
顶尖电子称条码秤LS系列称固件，最新固件，固件
最新发布
08-28
顶尖电子称条码秤LS系列称固件，最新固件，固件
爬取淘宝热销(热门)咖啡商品信息数据集
08-28
本资源旨在收集淘宝平台上热销咖啡商品的相关信息，包括但不限于：店铺所在省份、城市位置、商品名称、销售价格、销量数据、单价（以人民币计）、付款人数、是否提供包邮服务、是否来自天猫平台以及满减优惠的详细信息。这些信息均来源于淘宝平台的公开透明数据，可供学习参考之用。请注意，本资源仅用于学术研究和个人学习目的，不得用于商业用途或其他非法活动。
css实现3个盒子3d旋转动画
12-16
以下是CSS实现3个盒子3D旋转动画的代码和步骤： ```html <div class="box"></div> <div class="box"></div> <div class="box"></div> ``` ```css .container { perspective: 1000px; /* 视距，决定了3D效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值