css3D转换

最新推荐文章于 2024-05-29 19:01:50 发布
最新推荐文章于 2024-05-29 19:01:50 发布
阅读量29 收藏
点赞数
文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73805336/article/details/130915441
版权

1、 3D转换

特点： 近大远小，物体后面遮挡不可见

1.1三维坐标系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LABwXCrY-1685267969229)(C:\Users\HCKB\Pictures\Camera Roll\微信图片_20230524162447.jpg)]

1.2 3D位移

translate3d（x，y，z）；

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            transform: translateX(100px) translateY(100px) translateZ(100px);
            /* 1.translateZ 沿z轴移动 */
            /* 2.translateZ 后面的单位一般跟px */
            /* 3.translateZ(100px)  向外移动100px */
            /* 4.3D移动有简写 */
            transform: translate3d(100px, 100px, 100px);
            /* 5.里面的x，y，z是不能省略的，没有写0 */
        }
    </style>
</head>
<body>
    <div></div>
</body>

1.3 3D透视 perspective

透视就是让网页产生3D效果

透视也称为视距：就是人眼到屏幕的距离

距离视觉点越近在电脑上成像越大

透视的单位是像素

透视写在被观察元素的父盒子上面的

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离

z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大

 <style>
        body {
            /* 透视写到被观察元素的父盒子里面 */
            perspective: 200px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1.translateZ 沿z轴移动 */
            /* 2.translateZ 后面的单位一般跟px */
            /* 3.translateZ(100px)  向外移动100px */
            /* 4.3D移动有简写 */
            transform: translate3d(400px, 100px, 100px);
            /* 5.里面的x，y，z是不能省略的，没有写0 */
        }
    </style>
</head>
<body>
    <div></div>
</body>

1.4 3D旋转 rotate

   <style>
        body {
            perspective: 300px;
        }
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        img:hover {
            /* 沿x轴旋转 */
            /* transform: rotateX(360deg); */
            /* 沿y轴旋转 */
            /* transform: rotateY(360deg); */
            /* 沿z轴旋转 */
            transform: rotateZ(360deg);
        }
    </style>
<body>
    <img src="taoabotupian\1.png" alt="">
</body>

1.5 3D呈现 transform-style

transform-style：flat；默认不开启3d立体空间

transform-style：preserve-3d子元素开启立体空间

代码写给父亲，但是影响的是子盒子

 <style>
        /* body {
            perspective: 200px;
        } */
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            perspective: 200px;
            transition: all 1s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(60deg);
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: blue;
        }
        .box div:last-child {
            background-color: chartreuse;
            transform: rotateX(60deg);;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

两面翻转的盒子案例

<style>
        body {
            perspective: 400px;
        }
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .6s;
            /* 让背面的盒子保留立体空间  给父级添加*/
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(180deg);
        }
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            line-height: 300px;
            text-align: center;
            font-size: 30px;
            color: aliceblue;
        }
        .front {
            background-color: aqua;
            z-index: 1;
        }
        .back {
            background-color: brown;
            /* 像手机一样背靠背 */
            transform: translateZ(-1px) rotateY(180deg);
            /* z-index: 1; */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">欢迎</div>
        <div class="back">你</div>
    </div>
</body>

3D导航栏案例

  <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 100px;

        }
        ul li {
            float: left;
            width: 120px;
            height: 35px;
            list-style: none;
            /* 一会需要给box旋转 也需要透视  所以给li加  里面的盒子都有透视效果 */
            perspective: 500px;
        }
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .6s;
        }
        .box:hover {
            transform: rotateX(90deg);
        }
        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .front {
            background-color: aqua;
            transform: translateZ(17.5px);
        }
        .bottom {
            background-color: chartreuse;
            /* 注意里面的值必须为负值 */
            /* 我们如果有移动和其他样式  必须先移动 */
            transform:  translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">欢迎</div>
                <div class="bottom">你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">欢迎</div>
                <div class="bottom">你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">欢迎</div>
                <div class="bottom">你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">欢迎</div>
                <div class="bottom">你</div>
            </div>
        </li>
    </ul>
</body>

iv>

你





  • 欢迎

    你



  • ~~~
热身就犯困
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 3D转换和动画（animation）
qq_58946786的博客
09-19 307
CSS 3D转换和动画（animation）
ssc:一个 CSS 3D 转换库
07-04
CSS 3D 转换库。 例子 ssc ( '#test' ) . translate ( 42 , 69 , 99 ) . rotate ( [ 0 , 0 , 1 ] , Math . PI / 4 ) . scale ( 2 , 2 ) . changeOrigin ( 'bottom right' ) . apply ( ) ; 应用程序接口 ssc( ...
CSS 3D转换
MX22724的博客
12-26 231
css 3D转换
CSS3d转换
desson
03-03 116
参考 参考 参考 参考 主要知识点 3D位移: translate3d(x,y,z) 2.3D旋转: rotate3d(x,y,z) 透视: perspective 3D呈现 transfrom-style 元素旋转方向的判断【左手法则】 3d呈现 transform-style 控制子元素是否开启三维立体环境。。 transform-style: flat 子元素不开启3d立体空间 默认的 transform-style: preserve-3d; 子元素开启立体空间 代码写给父级，但是影响的是子
CSS 3D转换 transform
CyberPlayer的博客
03-01 295
通过 transform 属性，可以使用以下 3D 转换方法： rotateX() rotateY() rotateZ() 看着下面这个3维坐标系，就能很好的理解 x，y，z轴的旋转 rotateX() 方法 rotateX() 方法使元素绕其 X 轴旋转给定角度： rotateY() 方法 rotateY()方法使元素绕其 Y 轴旋转给定角度： rotateZ() 方法 rotateZ()方法使元素绕其 Z 轴旋转给定角度： CSS 转...
css3 3D转换
HGYYR的博客
04-04 361
3D转换
CSS系列之3D转换
老__L的博客
02-27 2306
本文主要介绍CSS的perspective、perspective-origin、transform-style属性。3D转换
css3D 转换
qq_42239440的博客
07-10 148
Css3 3D转换
m0_51495354的博客
11-30 746
Css3 3D转换
CSS3的3D转换
m0_58035213的博客
10-06 195
css3的3D转换
CSS3D转换效果库Sprite3D.js.zip
07-17
Sprite3D.js 是生成和操作 CSS 3D 转换效果的库。Sprite3D.js 没有任何的依赖项，所以非常容易集成 JS 库。Sprite3D.js 使用简单的 JavaScript 语法来控制 3D 转换效果。浏览器支持 Chrome, Safari, iOS, Android 4,...
CSS3 3D 转换
01-19
#rotate2D,#rotate3D { width: 80px; height: 70px; color: white; position:relative; font-weight:bold;...CSS3 3D 转换 ...CSS3 允许您使用 3D 转换来对元素进行格式化。 在本章中，您将学到其中的一些 3D
carousel:用javascript和css 3d转换编写的轮播小部件
05-15
轮播轮播小部件是一个CSS3 3D变换基础插件，可复制Cylinder，Time Machine和Cover Flow效果。 轮播小部件所需的文件是轮播js / css的最小或非最小版本（如下所示） < link href =" src/css/carousel.min.css " ...
利用HTML5+CSS3实现3D转换效果实例详解
09-24
对于css的二维世界，相信大家都不陌生。在二维的世界里，我们可以对元素设置宽高、位置、旋转、背景等等。...下面这篇文章主要给大家介绍了利用HTML5+CSS3实现3D转换效果的相关资料，需要的朋友可以参考。
说明 1px、1em、1rem、1vw、1vh 的区别
最新发布
Hlleo Wrold
05-29 198
htmlvwvh。
css-垂直居中的几种写法
xxuxioxx的博客
05-27 328
垂直居中的几种写法
CSS 媒体查询 响应式开发
生产队的驴
05-27 289
媒体查询（Media Queries）是CSS3的技术，可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。媒体查询可以使网页在不同设备上呈现不同的样式，以实现响应式设计。
CSS实现一个雨滴滑落效果
云加速
05-28 437
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
htmlcss3d立体文字
06-03
要创建 3D 立体文字，可以使用 CSS 3D 转换和一些 HTML 代码。以下是一个例子： HTML 代码： ``` <span class="front">3D <span class="back">Text ``` CSS 代码： ``` .container { perspective: 500...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值