基于css3的3D立方体旋转特效 （先translate与先rotate的不同）

最新推荐文章于 2023-08-13 21:15:14 发布
最新推荐文章于 2023-08-13 21:15:14 发布
阅读量4.8k 收藏 6
点赞数 4
分类专栏： css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sweetllh/article/details/68958286
版权

这里写图片描述
3D变换基于几个比较重要的属性，perspective,translateZ,preserve-3d;
格式：
舞台(perspective)
容器(3D, preserve-3d)
内容

3D实现立方体盒子：
这里写图片描述

这里写图片描述

transform的4个属性，排序不同，带来的效果也不同。
先移动的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>3d</title>
    <style>
        *{padding: 0;margin: 0;}

        ul,li{list-style: none;}

        html{
            height: 100%;
            background: #ff0;
        }

        div{
            perspective: 1000px;
        }

        ul{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            font-size: 30px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            transform: rotateX(30deg) rotateY(30deg);
            animation: rotate 18s infinite linear; 
        }

        @keyframes rotate{
            from{
                transform: rotateX(0deg) rotateY(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        ul li{
            width: 100%;
            height: 100%;
            position: absolute;
            border: 1px solid #fff;
            background: #333;
            opacity: 0.6;
        }

        ul .front{
            transform: translateZ(100px);
        }

        ul .back{
            transform:translateZ(-100px)  rotateY(180deg);
        }

        ul .left{
            transform: translateX(-100px) rotateY(-90deg) ;
        }

        ul .right{
            transform:translateX(100px)  rotateY(90deg) ;
        }

        ul .top{
            transform: translateY(-100px) rotateX(90deg) ;
        }

        ul .bottom{
            transform: translateY(100px) rotateX(-90deg) ;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li class="front">前</li>
            <li class="back">后</li>
            <li class="left">左</li>
            <li class="right">右</li>
            <li class="top">上</li>
            <li class="bottom">下</li>
        </ul>
    </div>
</body>
</html>

先旋转后移动，坐标轴改变方向。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>3d</title>
    <style>
        *{padding: 0;margin: 0;}

        ul,li{list-style: none;}

        html{
            height: 100%;
            background: #ff0;
        }

        div{
            perspective: 1000px;
        }

        ul{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            font-size: 30px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            transform: rotateX(30deg) rotateY(30deg);
            animation: rotate 18s infinite linear; 
        }

        @keyframes rotate{
            from{
                transform: rotateX(0deg) rotateY(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        ul li{
            width: 100%;
            height: 100%;
            position: absolute;
            border: 1px solid #fff;
            background: #333;
            opacity: 0.6;
        }

        .front{
            transform: translateZ(100px);
        }

        .back{
              transform:rotateY(180deg) translateZ(100px);
        }

        .left{
            transform: rotateY(-90deg) translateZ(100px);
        }

        .right{
            transform:rotateY(90deg) translateZ(100px);
        }

        .top{
            transform: rotateX(90deg) translateZ(100px)  ;
        }

        .bottom{
            transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li class="front">前</li>
            <li class="back">后</li>
            <li class="left">左</li>
            <li class="right">右</li>
            <li class="top">上</li>
            <li class="bottom">下</li>
        </ul>
    </div>
</body>
</html>
sweetllh
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS函数: translate、translate3d的使用
胖蔡叨叨叨
06-05 353
和函数可以实现元素在指定轴的平移的功能。函数使用在CSS转换属性transform的属性值。
CSS3中的3D旋转 rotate、3D位移 translate
梦空间
03-26 6905
这里只考虑 chrome 的兼容。 3DrotateDemo.html 3D旋转的Demo #experiment { -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; -webkit-transf
纯CSS实现旋转立方体
qq_42212381的博客
01-23 517
纯css3实现旋转3D立方体骰子（自旋转型） 主要运用css3的transform，rotate，translate，animation等动画， 以perspective，perspective-origin，transform-style等属性为辅助 具体实现代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &...
CSS中的3D旋转
m0_56232007的博客
06-09 7244
一、3D旋转 格式： transform：rotateX（旋转角度） transform：rotateY（旋转角度） transform：rotateZ（旋转角度） transform：rotate3d（1,1,1,deg） 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z取值为0/1 0表示不旋转 1表示旋转 注意： ***第4个参数表示旋转的角度，参数不允许省略*** 注意： 浏览器默认是2d的，如果
CSS3 3D立体旋转
热门推荐
gaoshanyangzhi_1999的博客
08-18 1万+
用到的知识点 最重要的一个属性 transform-style:flat|preserve-3d;该属性默认值为 flat。 当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时，容器的子元素便会相对父元素所在平面进行3D变换。 位移操作： translateX(length) 、translateY(length) 、 translateZ(len...
CSS实现旋转立方体
qq_43390721的博客
03-14 635
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; div{ width: 300px;height: 300px;margi
【CSS3】CSS3 3D 转换 ④ ( 3D 旋转 rotate3d | rotate3d 语法 | rotate3d 自定义轴旋转 | 元素旋转方向 - 左手准则 | 代码示例 )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-13 6494
一、3D 旋转 rotate3d 1、rotate3d 语法 2、rotate3d 自定义轴旋转 3、元素旋转方向 - 左手准则 二、代码示例 1、代码示例 2、执行结果
CSS3 3D立方体旋转展示特效特效代码
03-20
在3D立方体旋转特效中，我们可以使用GSAP的`to()`或`fromTo()`方法来创建旋转动画，指定元素的初始状态和目标状态，以及动画的时序。 例如，要使立方体沿着Y轴旋转90度，你可以这样编写代码： ```javascript gsap....
CSS3实现3D立方体旋转动画特效特效代码
03-20
在CSS3中，3D立方体旋转动画特效是一种利用现代浏览器对CSS3特性的支持，创建出具有立体感和动态变换效果的图形技术。这种特效不仅能够提升网站的视觉吸引力，还能为用户交互提供新颖的方式。以下是关于CSS3实现3D...
纯css3 3D图片立方体旋转动画特效
09-08
本主题聚焦于“纯CSS3 3D图片立方体旋转动画特效”，这是一项利用CSS3的新特性实现的高级技巧，它可以为网页增添生动、动态的视觉体验。 首先，我们来详细探讨CSS3中的3D变换。CSS3的3D变换允许开发者创建出具有...
css3 3d立方体加载动画特效代码
03-20
对于3D立方体加载动画，我们需要用到`rotateX`, `rotateY`, `rotateZ`和`translate3d`来实现立方体的旋转和平移。 2. **透视（Perspective）**：透视属性定义了观察者相对于3D空间的位置，它为3D元素提供了深度感。...
纯css3实现的3D立方体旋转动画特效源码.zip
11-20
【标题】"纯CSS3实现的3D立方体旋转动画特效源码"是关于利用现代Web技术中的CSS3来创建动态、引人入胜的视觉效果的实例。这个项目主要展示了CSS3的强大功能，特别是在3D空间中的变换和动画方面。 在Web开发中，CSS3...
3D立方体
weixin_44808327的博客
12-12 155
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D</title> <style type="text/css"> .wp{ width: 200px; height: 200px; position: absolute; margin: auto; left: 0; right: 0;
3D立方体（cube）
知屋安砖
12-25 557
3D立方体示例htmlcss 示例 html <p>Hover the cursor on The Cube</p> <div id='cube-container'> <div class="face top"></div> <div class="face right"></div> <di...
CSS3 3D立方体
lsk222的博客
02-29 548
CSS3 实现3D立方体需要我们有一定的空间想象能力，但难度不大 首先我们需要知道实现3D立方体时坐标系是什么样的，这是一张经典的图。把网格图当做浏览器屏幕 z轴是垂直屏幕的轴指向你 另外，在实现3D立方体之前我们还需要先了解几个属性及功能函数： transform： 位移： translate3d（值一，值二,值三）值一：水平方向...
3D效果-长方形
m0_55041880的博客
07-21 129
<!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"> <title>Doc
3D正方体旋转
cedricdx的博客
04-20 2922
3D正方体旋转3D正方体旋转，当点击正方体时，正方体停止旋转 3D正方体旋转，当点击正方体时，正方体停止旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正方体</title> <style> *{ ma...
css3炫酷立方体3D旋转
小柒的前端之旅
03-25 1361
直接上代码，代码很容易懂 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
3d转换（立方体旋转效果）
weixin_37552710的博客
07-26 1250
Css3d转换，立方体效果： 1， 重要的属性：perspective、translateY、preserve-3d、perspecctive-origin 2， rotateX()为正值绕x轴顺时针旋转，负值逆时针旋转；如奥运会体操单杠项目； rotateY()为正值绕Y轴顺时针旋转，负值逆时针旋转；如钢管舞； rotateZ()从视觉上看，rotateZ()让元素顺时针或逆时针运动；
ios上css实现3d立方体旋转
05-18
在iOS上使用CSS实现3D立方体旋转可以通过使用CSS3的transform属性和perspective属性来实现。以下是一个简单的例子： HTML代码： ``` <div class="side">1 <div class="side">2 <div class="side">3 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值