2020-11-20 web3D转换

最新推荐文章于 2024-07-24 11:13:53 发布

Deigin

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量186

点赞数

分类专栏：笔记文章标签： css html js

本文链接：https://blog.csdn.net/qq_45659634/article/details/109853634

版权

web 3D转换

1.旋转 rotate
（1） transform:rotateX(旋转角度 deg为单位); // 绕X轴
（2） transform:rotateY(旋转角度 deg为单位); // 绕Y轴
（3） transform:rotateZ(旋转角度 deg为单位); // 绕Z轴
（4） transform:rotate3d（X，Y，Z deg为单位); //综合
2.perspective //透视效果
3. transform-style //规定被嵌套元素如何在3D中成效果

代码示例1  3D旋转综合应用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D旋转综合应用</title>
    <style>
        body{
            perspective: 500px; /*透视*/
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d; /*规定被嵌套元素在3D中

最低0.47元/天解锁文章

Deigin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-11-20 web3D转换

web 3D转换1.旋转 rotate（1） transform:rotateX(旋转角度 deg为单位); // 绕X轴（2） transform:rotateY(旋转角度 deg为单位); // 绕Y轴（3） transform:rotateZ(旋转角度 deg为单位); // 绕Z轴（4） transform:rotate3d（X，Y，Z deg为单位); //综合2.perspective //透视效果3. transform-style //规定被嵌套元素如何在3D
复制链接

扫一扫