preserve-3d

最新推荐文章于 2024-05-11 15:22:40 发布
最新推荐文章于 2024-05-11 15:22:40 发布
阅读量1.0k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39817708/article/details/77970165
版权
舞台层
  景深层 perspective: 1600px;
  形变中心点perspective-origin: 0px 0px;
  形变中心点transform-origin: center center;
3d中心层
就是围绕运动的层
下面用几个例子来介绍3d动画
例1正方体
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔方</title>
    <style type="text/css">
        body{
            background: black;
        }
        .pp{
            perspective: 1600px;

        }
        .wrap{
            transform-style: preserve-3d;
            transform: rotateX(30deg) rotateY(30deg);
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            animation: donghua 2s linear infinite;

        }
        @keyframes donghua{
            0%{
                transform: rotateX(30deg) rotateY(30deg);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        .wrap div{
            width: 210px;
            height: 210px;
            position: absolute;
            border: 1px solid yellow;
            background-color: black;
            box-shadow: 0 0 20px 2px yellow;
            color: white;
            font-size: 50px;
            text-align: center;
            line-height: 210px;
            text-shadow: 5px 5px 20px red ;
            opacity: 0.5;

        }
        .box1{
            background: red;
            transform: translateZ(105px);

        }
        .box2{
            background: orange;
            transform: translateZ(-105px);

        }
        .box3{
            background: blue;

            transform: translateX(105px)rotateY(90deg);


        }
        .box4{
            background: green;
            transform: translateX(-105px)rotateY(90deg);

        }
        .box5{
            background: cyan;
            transform: translateY(-105px)rotateX(90deg);

        }
        .box6{
            background: purple;
            transform: translateY(105px)rotateX(90deg);

        }
        .box7{
            background: red;
            transform: translateZ(35px);

        }
        .box8{
            background: orange;
            transform: translateZ(-35px);

        }
        .box9{
            background: blue;

            transform: translateX(35px)rotateY(90deg);


        }
        .box10{
            background: green;
            transform: translateX(-35px)rotateY(90deg);

        }
        .box11{
            background: cyan;
            transform: translateY(-35px)rotateX(90deg);

        }
        .box12{
            background: purple;
            transform: translateY(35px)rotateX(90deg);

        }
    </style>
</head>
<body>
    <div class="pp">
        <div class="wrap">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
            <div class="box4">4</div>
            <div class="box5">5</div>
            <div class="box6">6</div>
            <div class="box7">7</div>
            <div class="box8">8</div>
            <div class="box9">9</div>
            <div class="box10">10</div>
            <div class="box11">11</div>
            <div class="box12">12</div>
        </div>
    </div>
</body>
</html>
代码运行图

例2 圈图
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圈</title>
    <style type="text/css">
        body{
            background: gray;
        }
        .box{
            perspective: 2600px;
        }
        .wrap{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            transform-style: preserve-3d;
            position: relative;
            margin: 300px auto;
            transform: rotateX(-10deg)rotateY(10deg);
            animation: donghua 30s linear infinite;
            
        }
        @keyframes donghua{
            0%{
                transform: rotateX(-10deg)rotateY(10deg);
            }
            100%{
                transform: rotateX(-10deg)rotateY(3600deg);
            }
        }
        .wrap:hover{
            animation-play-state: paused;
        }
        .wrap div{
            width: 200px;
            height: 200px;
            position: absolute;
            
        }
        .box1{
            background-image: url('1.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color: red;
            transform: rotateY(360deg)translateZ(500px);
        }
        .box2{
            background-image: url('2.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color: yellow;
            transform: rotateY(30deg)translateZ(500px);
        }
        .box3{
            background-image: url('3.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color: blue;
            transform: rotateY(60deg)translateZ(500px);
        }
        .box4{
            background-image: url('4.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color: green;
            transform: rotateY(90deg)translateZ(500px);
        }
        .box5{
            background-image: url('5.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color: cyan;
            transform: rotateY(120deg)translateZ(500px);
        }
        .box6{
            background-image: url('6.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color: purple;
            transform: rotateY(150deg)translateZ(500px);
        }
        .box7{
            background-image: url('7.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color: greenyellow;
            transform: rotateY(180deg)translateZ(500px);
        }
        .box8{
            background-image: url('8.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color: pink;
            transform: rotateY(210deg)translateZ(500px);
        }
        .box9{
            background-image: url('9.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color: orange;
            transform: rotateY(240deg)translateZ(500px);
        }
        .box10{
            background-image: url('10.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color: gray;
            transform: rotateY(270deg)translateZ(500px);
        }
        .box11{
            background-image: url('11.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color: seagreen;
            transform: rotateY(300deg)translateZ(500px);
        }
        .box12{
            background-image: url('12.jpg');
            background-repeat:no-repeat;
            background-size: cover;
            background-color:purple;
            transform: rotateY(330deg)translateZ(500px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
            <div class="box4"></div>
            <div class="box5"></div>
            <div class="box6"></div>
            <div class="box7"></div>
            <div class="box8"></div>
            <div class="box9"></div>
            <div class="box10"></div>
            <div class="box11"></div>
            <div class="box12"></div>
        </div>
    </div>
</body>
</html>
运行结果：

例3 旋转链
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转多圈</title>
    <style type="text/css">
        body{
            background: skyblue;
            
        }
        .box{
            perspective: 1600px;
        }
        .wrap{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            transform-style: preserve-3d;
            position: relative;
            margin: 400px auto;
            transform: rotateX(-10deg)rotateY(10deg);
            animation: donghua 10s linear infinite ;
            perspective-origin: 0 0 ;
        }
        .wrap:hover{
            animation-play-state: paused;
        }
        @keyframes donghua{
            0%{
                transform: rotateX(-10deg)rotateY(10deg);
            }
            100%{
                transform: rotateX(-10deg)rotateY(3600deg);
            }
        }
        .wrap div{
            width: 50px;
            height: 50px;
            position: absolute;
            font-size: 30px;
            color: white;
            line-height: 50px;
            text-align: center;
        }
        .box1{
            background-color: red;
            transform: rotateY(360deg)translateZ(200px);
        }
        .box2{
            background-color: yellow;
            transform: rotateY(30deg)translateZ(200px)translateY(20px);
        }
        .box3{
            background-color: blue;
            transform: rotateY(60deg)translateZ(200px)translateY(40px);
        }
        .box4{
            background-color: green;
            transform: rotateY(90deg)translateZ(200px)translateY(60px);
        }
        .box5{
            background-color: cyan;
            transform: rotateY(120deg)translateZ(200px)translateY(80px);
        }
        .box6{
            background-color: purple;
            transform: rotateY(150deg)translateZ(200px)translateY(100px);
        }
        .box7{
            background-color: greenyellow;
            transform: rotateY(180deg)translateZ(200px)translateY(120px);
        }
        .box8{
            background-color: pink;
            transform: rotateY(210deg)translateZ(200px)translateY(140px);
        }
        .box9{
            background-color: orange;
            transform: rotateY(240deg)translateZ(200px)translateY(160px);
        }
        .box10{
            background-color: gray;
            transform: rotateY(270deg)translateZ(200px)translateY(180px);
        }
        .box11{
            background-color: seagreen;
            transform: rotateY(300deg)translateZ(200px)translateY(200px);
        }
        .box12{
            background-color:purple;
            transform: rotateY(330deg)translateZ(200px)translateY(220px);
        }
        .box13{
            background-color: red;
            transform: rotateY(360deg)translateZ(200px)translateY(240px);
        }
        .box14{
            background-color: yellow;
            transform: rotateY(30deg)translateZ(200px)translateY(260px);
        }
        .box15{
            background-color: blue;
            transform: rotateY(60deg)translateZ(200px)translateY(280px);
        }
        .box16{
            background-color: green;
            transform: rotateY(90deg)translateZ(200px)translateY(300px);
        }
        .box17{
            background-color: cyan;
            transform: rotateY(120deg)translateZ(200px)translateY(320px);
        }
        .box18{
            background-color: purple;
            transform: rotateY(150deg)translateZ(200px)translateY(340px);
        }
        .box19{
            background-color: greenyellow;
            transform: rotateY(180deg)translateZ(200px)translateY(360px);
        }
        .box20{
            background-color: pink;
            transform: rotateY(210deg)translateZ(200px)translateY(-340px);
        }
        .box21{
            background-color: orange;
            transform: rotateY(240deg)translateZ(200px)translateY(-320px);
        }
        .box22{
            background-color: gray;
            transform: rotateY(270deg)translateZ(200px)translateY(-300px);
        }
        .box23{
            background-color: seagreen;
            transform: rotateY(300deg)translateZ(200px)translateY(-280px);
        }
        .box24{
            background-color:purple;
            transform: rotateY(330deg)translateZ(200px)translateY(-260px);
        }
        .box25{
            background-color: red;
            transform: rotateY(360deg)translateZ(200px)translateY(-240px);
        }
        .box26{
            background-color: yellow;
            transform: rotateY(30deg)translateZ(200px)translateY(-220px);
        }
        .box27{
            background-color: blue;
            transform: rotateY(60deg)translateZ(200px)translateY(-200px);
        }
        .box28{
            background-color: green;
            transform: rotateY(90deg)translateZ(200px)translateY(-180px);
        }
        .box29{
            background-color: cyan;
            transform: rotateY(120deg)translateZ(200px)translateY(-160px);
        }
        .box30{
            background-color: purple;
            transform: rotateY(150deg)translateZ(200px)translateY(-140px);
        }
        .box31{
            background-color: greenyellow;
            transform: rotateY(180deg)translateZ(200px)translateY(-120px);
        }
        .box32{
            background-color: pink;
            transform: rotateY(210deg)translateZ(200px)translateY(-100px);
        }
        .box33{
            background-color: orange;
            transform: rotateY(240deg)translateZ(200px)translateY(-80px);
        }
        .box34{
            background-color: gray;
            transform: rotateY(270deg)translateZ(200px)translateY(-60px);
        }
        .box35{
            background-color: seagreen;
            transform: rotateY(300deg)translateZ(200px)translateY(-40px);
        }
        .box36{
            background-color:purple;
            transform: rotateY(330deg)translateZ(200px)translateY(-20px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
            <div class="box1">活</div>
            <div class="box2">半</div>
            <div class="box3">步</div>
            <div class="box4">你</div>
            <div class="box5">若</div>
            <div class="box6">平</div>
            <div class="box7">凡</div>
            <div class="box8">就</div>
            <div class="box9">随</div>
            <div class="box10">时</div>
            <div class="box11">光</div>
            <div class="box12">一</div>
            <div class="box13">起</div>
            <div class="box14">平</div>
            <div class="box15">凡</div>
            <div class="box16">各</div>
            <div class="box17">自</div>
            <div class="box18">安</div>
            <div class="box19">好</div>
            <div class="box20">你</div>
            <div class="box21">若</div>
            <div class="box22">幸</div>
            <div class="box23">福</div>
            <div class="box24">，</div>
            <div class="box25">便</div>
            <div class="box26">飞</div>
            <div class="box27">到</div>
            <div class="box28">天</div>
            <div class="box29">边</div>
            <div class="box30">不</div>
            <div class="box31">再</div>
            <div class="box32">踏</div>
            <div class="box33">足</div>
            <div class="box34">我</div>
            <div class="box35">的</div>
            <div class="box36">生</div>
        </div>
    </div>
</body>
</html>
运行结果：


通过这些例子估计也弄懂了3d效果了，由于是动画，现又不支持动画截图，如果想看动画效果的话，自己复制代码可以看到。有关3d效果就到这里了。

_likeli
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3中设置3D变形的transform-style属性详解
12-13
他主要有两个属性值：flat和preserve-3d。 transform-style属性的使用语法非常简单： CSS Code复制内容到剪贴板 transform-style: flat | preserve-3d  其中flat值为默认值，表示所有子元素在2D平面呈现。...
CSS-3D悬停相册动画
03-21
- `transform-style: preserve-3d;`：此属性确保子元素在3D空间中保持它们的3D结构，而不是扁平化。 - `perspective`: 设置观察者的视距，影响3D元素的深度感。 - `backface-visibility: hidden;`：隐藏元素的...
看图说话， 详解perspective 和 preserve-3d
画漫画的程序员∙苏南
03-21 1418
点击上方“IT平头哥联盟”，选择“置顶或者星标”一起进步～本文作者：安佳，360 搜索事业部的前端开发工程师，W3C CSS 工作组成员。今天和大家分享两个和 CSS 3D 相关的属性/值...
CSS perspective 与 preserve-3d 的区别（带GIF效果图）
卡尔特斯
12-22 2452
该属性是可以给图像呈现立体感，但是，那仅仅只是一种。/* 反复执行动画，注释，免得影响主要效果 */效果，但是理论上来说，图片如果真的在。后面去了的，这里依然还是在父容器的。：这个属性是让元素处在了真实的。空间中了，图片穿模了父容器的。的视觉感受，并没有真正的在。，拷贝下面代码，换个图片即可。环境中，是会穿模到父容器。上面的效果代码，新建一个。
CSS3之transform详解及示例（3d变形）
最新发布
Zbz00720的博客
05-11 670
主要还是考验大家对X,Y,Z三个轴的理解，能否在脑海中构思出大致的逻辑。
深入探究CSS3 transform-style:preserve-3d
weixin_45696837的博客
10-17 3608
这些都是我参照文档以及自己试出来的理解。 至于对不对嘛，还要实践才知道。 来看嘛，打都打开，也许会有意想不到的收获呢！ 默认值flat没什么好说的。 preserve-3d：指定子元素定位在三维空间内。 上效果解释，说服力满满滴！ <style> body { perspective: 800px; perspective-origin: 250px 300px; } .wrapper { position: relati
（纯css3实现）3d效果----环中心球形图片旋转 中心球形图片前面的元素透明度为1 图片后面透明度为0.1
weixin_57145577的博客
08-31 2922
图片示例 html <!-- 转动区域 --> <section id="slideshow"> <div class="entire-content"> <div class="content-carrousel"> <div class="shadow" v-for="(item,index) in funList" @click="toPage(item)"> <svg-icon :icon-class="item
关于transform-style: preserve-3d；设置后，无效果问题
weixin_52096382的博客
11-28 837
关于transform-style: preserve-3d；设置后，无效果问题
纯CSS实现旋转相册-3D旋转-悬停效果.html
04-18
通过设置容器的transform-style属性为preserve-3d，使得容器内的元素可以在3D空间中进行变换。通过设置容器的transform属性为rotateY，使得容器在Y轴上进行旋转，从而实现相册图片的3D旋转效果。同时，通过设置img...
CSS3-3D动画制作旋转立方体
01-20
3. `transform-style: preserve-3d;`：此属性确保子元素在3D空间内保持三维状态，而不是扁平化为2D。这对于构建3D立方体至关重要。 4. `animation`：应用动画到元素。在本例中，我们将`rotate`动画应用到`section`...
css3-3d-scene
05-08
"css3-3d-scene"项目显然旨在利用CSS3的3D转换和动画功能创建一个交互式的3D空间。在这个场景中，用户可以通过键盘热键进行互动，比如使用"q"、"e"、"w"、"s"、"a"、"d"以及方向键来改变视角和移动场景元素，这种...
区别一下preserve-3d和 perspective透视
皮蛋solo粥的博客
04-08 736
相同点： 他俩都写在父元素上，作用于父元素里面的所有子元素。 不同点： preserve-3d：是开启3d空间，让元素脱离2d平面，让我们看起来有立体的效果。 perspective：是透视效果，很多人会误以为透视就是3d，其实不是的，透视达到了远小近大的效果，从而让人误认为是3d，但这只是欺骗了你的眼睛，实际上还是2d平面，透视一般作用于所有设置了Z轴位移的子元素，譬如translateZ——transform:translateZ(600px);因为Z轴就是距离屏幕的坐标轴，所以透视是为Z轴
关于transform-style:preserve-3d的一些理解
热门推荐
liangtaox8的博客
11-16 1万+
transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。 transform-style属性的使用语法非常简单： CSS Code复制内容到剪贴板 transform-style: flat | preserve-3d   其中flat值为...
3D翻转 （CSS+HTML）
m0_56776497的博客
05-29 2310
3D翻转 （CSS+HTML） transform-style: preserve-3d 三维效果 perspective and perspective-origin 3D视距，透视/景深效果 transform-style属性 要利用 CSS3 实现 3D 的效果，最主要的就是借助 transform-style 属性。 transform-style 只有两个值可以选择： // 语法： transform-style: flat/preserve-3d; transform-style:
为什么 transform-style: preserve-3d；不起效果
DIUDIUjiang的博客
04-19 2778
在练习下面的3D转换时，正常效果本来应该是下面这样的 鼠标碰到他后，会翻转过来，背面在上，变成下面这样 但是小编在练习的时候去出现了另一种情况 不知道会不会有人和小编一样在练习CSS3的3D转换时，也会遇到这样的问题，就是transform-style: preserve-3d;没有起到效果， 就类似下面的效果 翻转过来是这样的 这就让小编百思不得其解，为什么会这样呢？ 原来是因为小编忘记加backface-visibility: hidden;（背面隐藏）这个属性了 ..
3D立方体旋转
qq_41309350的博客
01-26 1200
制作立方体构思 1:要想做一个立方体首先是做6个面 （以中间为基准）中间向前面平移150px（transform: translateZ(150px)），后面也平移150px, 然后旋转 rotateY(180deg)，这样前后面就做完了。 左：以中间为准逆时针针旋转90度（rotateY(-90deg)） 右：以中间为准顺时针针旋转90度（rotateY(90deg)） 左右都平移150px translateZ(150px) 上下道理都一样 <div id="warp">
CSS3 3D transform
cwyp18809的博客
03-25 1068
目录 一、transform简介 1、定义和用法 2、浏览器支持 3、语法 二、 学习步骤 1、 前情提要 2、 什么是3D transform变换 3、 关键点：rotateX, rotateY, rotateZ 4、 perspective属性 5、translateZ告诉你透视位置 6、perspective-origin （1）源点向左偏 （2）源点左偏同时上偏 7、transform-s...
preserve3d css3,关于transform-style: preserve-3d;的问题
weixin_34327476的博客
08-04 388
该楼层疑似违规已被系统折叠隐藏此楼查看此楼今天在学这个3D属性的时候，想做一个旋转木马的效果的，给容器加transform-style: preserve-3d;属性之后，图片就模糊了，没加之前是很清晰的(因为没有加z-index，所以没加的时候，后面的图片会顶在前面)，我没有缩放，所以图片太小这种问题不存在，而且我现在是只差这一个属性就导致了图片模糊，百度也没有找到解决的办法，只能在贴吧求大神...
CSS3-3D变换 transform-style:preserve-3d
weixin_47295886的博客
07-18 987
3D变换 transform-style:preserve-3d
transform-style: preserve-3d;
09-04
通过将容器元素的子元素设置为 preserve-3d，我们可以在子元素上应用各种3D转换，例如 translate3D、rotate3D 和 scale3D 等。这样能够更加精确地控制子元素在3D空间中的位置和变换效果。 总之，transform-style: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值