CSS3提高: CSS3 3D转换

这篇具有很好参考价值的文章主要介绍了CSS3提高: CSS3 3D转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

3D 转换

 我们生活的环境是3D,照片就是3D物体2D平面呈现的例子。

有什么特点

近大远小。

物体后面遮挡不可见

我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

三维坐标系

三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。

x轴:水平向右      注意: x 右边是正值,左边是负值

y轴:垂直向下      注意y 下面是正值,上面是负值

z轴:垂直屏幕      注意: 往外面是正值,往里面是负值

CSS3提高: CSS3 3D转换

3D 转换我们主要学习工作中最常用的  3D 位移 和  3D 旋转

主要知识点

3D位移: translate3d(x,y,z)

3D旋转: rotate3d(x,y,z)

透视: perspective

3D呈现 transfrom-style

3D移动 translate3d

3D移动2D移动的基础上多加了一个可以移动的方向,就是z方向 translform:translateX(100px):仅仅是在x轴上移动

translform:translateY(100px):仅仅是在Y轴上移动

translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)

transform:translate3d(x,y,z):其中 xyz 分别指要移动的轴的方向的距离 

因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动

透视 perspective

2D平面产生近大远小视觉立体,但是只是效果二维的  

如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)

模拟人类的视觉位置,可认为安排一只眼睛去看 

透视我们也称为视距:视距就是人的眼睛到屏幕的距离

距离视觉点越近的在电脑平面成像越大,越远成像越小 

透视的单位是像素

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

d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。

z:就是 z轴,物体距离屏幕的距离,z轴越大(正值) 我们看到的物体就越大。

CSS3提高: CSS3 3D转换

CSS3提高: CSS3 3D转换 translateZ

translform:translateZ(100px):仅仅是在Z轴上移动。

有了透视,就能看到translateZ 引起的变化了   

translateZ:近大远小

translateZ:往外是正值

translateZ:往里是负值 

CSS3提高: CSS3 3D转换

3D旋转 rotate3d

3D旋转指可以让元素平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转。

语法

transform:rotateX(45deg):沿着x轴正方向旋转 45

CSS3提高: CSS3 3D转换

向里面的就是 rotateX的正轴

transform:rotateY(45deg) :沿着y轴正方向旋转 45deg

CSS3提高: CSS3 3D转换

rotateY正值 

transform:rotateZ(45deg) :沿着Z轴正方向旋转 45deg

transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg角度(了解可)

CSS3提高: CSS3 3D转换

对于元素旋转的方向的判断 我们需要先学习一个左手准则。

左手准则

左手的手拇指指向 x轴的正方向

其余手指的弯曲方向就是该元素沿着x轴旋转的方向

CSS3提高: CSS3 3D转换

 左手的手拇指指向 y的正方向

其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)

CSS3提高: CSS3 3D转换transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度(了解即可

xyz是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度。

transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg

transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg

3D呈现 transfrom-style

控制子元素是否开启三维立体环境。

transform-style: flat 子元素不开启3d立体空间  默认的

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

代码写给父级,但是影响的是子盒子

这个属性很重要,后面必用

CSS3提高: CSS3 3D转换

CSS3提高: CSS3 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">
    <title>Document</title>
    <style>
        body{
            perspective: 300px;
        }
        .box{
            
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子盒子保持3D立体空间环境 */
            transform-style: preserve-3d;
        }
        .box:hover{
             transform: rotateY(60deg);
        }
        .box div{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        .box div:last-child{
            
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
</html>

案例:两面翻转的盒子

CSS3提高: CSS3 3D转换

 案例:实现步骤

1. 搭建HTML结构 

box父盒子里面包含前后两个子盒子

box 是翻转的盒子  front是前面盒子 back是后面盒子

CSS3提高: CSS3 3D转换

 2. CSS样式

box指定大小,切记要添加3d呈现

back盒子要沿着Y轴翻转180

最后鼠标经过box 沿着Y旋转180deg

注意:backface-visibility:hidden 不面向屏幕时隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            perspective: 400px;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            position: relative;
            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%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
        }
        .front{
            transform: translateZ(1px);
            backface-visibility: hidden;
            background-color: pink;
            z-index: 1;
        }
        .back{
            backface-visibility: hidden;
            background: purple;
            /* 像手机一样背靠背旋转 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">前端小白</div>
        <div class="back">在线寻找帮助</div>
    </div>
</body>

</html>

CSS3提高: CSS3 3D转换

案例:3D导航栏

实现步骤

1. 搭建HTML结构

<ul>
        <li>
            <div class="box">
                <div class="front">前面</div>
                <div class="bottom">后面</div>
            </div>
        </li>
        
    </ul>

li 做导航栏

.box 是翻转的盒子  front是前面盒子 bottom是底下盒子

2. CSS样式

li设置大小,加透视和 3d呈现

front 需要前移 17.5像素

bottom 需要下移 17.5像素 并且要沿着x轴翻转  负90

鼠标放到box 让盒子旋转90

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul{
            margin: 100px;
        }
        ul li{
            float: left;
            margin-left: 10px;
            width: 120px;
            height: 35px;
            list-style: none;
            line-height: 35px;
            text-align: center;
            color: black;
            /* 一会我们需要给box旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
            perspective: 500px;
        }
        .box{
            transform-style: preserve-3d;
            position: relative;
            width: 100%;
            height: 100%;
            transition: all .4s;
        }
        .box:hover{
            transform: rotateX(90deg);
        }
        .front,.bottom{
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }
        .front{
            z-index: 1;
            background-color: pink;
            transform: translateZ(17.5px);
        }
        .bottom{
            background-color: purple;
            /* 这个x轴一定是负值 */
            /* 我们如果有移动 或者其他样式 必须先写我们的移动 */
            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>
        <li>
            <div class="box">
                <div class="front">前面</div>
                <div class="bottom">后面</div>
            </div>
        </li>
        
    </ul>
</body>

</html>

CSS3提高: CSS3 3D转换 案例:旋转木马

实现步骤

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

里面的6div 分别是 6个狗狗图片

注意最终旋转是section标签 旋转

2. CSS样式

body添加 透视效果 perspective: 1000px;

section 添加 大小,一定不要忘记添加  3d呈现效果控制里面的6div

别忘记子绝父相,section要加相对定位

里面6div 全部绝对定位叠到一起,然后移动不同角度旋转和距离

注意:旋转角度用rotateY   距离 肯定用 translateZ来控制

section  添加动画animation ,让它可以自动旋转即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            /* 现在版本不一样,只能给真正的父元素加才有效 */
            perspective: 1000px;
        }
        section{
            transform-style: preserve-3d;
            /* perspective: 1000px; */
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            /* 添加动画 */
            animation: rotate 3s linear infinite;
            background: url(media/pig.jpg);
        }
        section:hover{
            /* 鼠标放入停止动画 */
            animation-play-state: paused;
        }
        @keyframes rotate{
            from{
                transform: rotateY(0);
            }
            to{
                transform: rotateY(360deg);
            }
        }
        section div{
            
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/dog.jpg) no-repeat;
        }
        section div:nth-child(1){
            transform:rotateY(0deg) translateZ(300px);
        }
        section div:nth-child(2){
            /* 先旋转好了 再移动 */
            transform: rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3){
            /* 先旋转好了 再移动 */
            transform: rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4){
            /* 先旋转好了 再移动 */
            transform: rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5){
            /* 先旋转好了 再移动 */
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6){
            /* 先旋转好了 再移动 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

CSS3提高: CSS3 3D转换文章来源地址https://www.toymoban.com/news/detail-427841.html

到了这里,关于CSS3提高: CSS3 3D转换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3基础之3D转换(1)

    3. 透视perspective 3.1`translateZ` 4. 3D旋转`rotate3d` 5. 3D呈现`transform-style` 1. 三维坐标系 ======================================================================== 三维坐标系 其实就是指立体空间,立体空间是由3个轴共同组成的 x轴: 水平向右 注意: x 右边是正值,左边是负值 y轴: 垂直向下 注意:

    2024年04月23日
    浏览(65)
  • 无涯教程-CSS3 - 3D转换属性

    使用3d变换,无涯教程可以将元素移动到x轴,y轴和z轴。下面的示例清楚地指定了元素将如何旋转。 以下方法用于调用3D变换- Sr.No. Value Remark 1 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 用于通过使用矩阵的16个值来变换元素 2 translate3d(x,y,z) 用于通过使用x轴,

    2024年02月20日
    浏览(52)
  • 【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )

    在本博客中引入 3D 效果 透视视图 Perspective 概念 ; 3D 视图中 产生 3D 效果 , 最终要的是有透视效果 , 通俗的讲 \\\" 透视 \\\" 就是实现 \\\" 近大远小 \\\" 的效果 ; 透视 就是 将 3D 空间中的物体 投影显示到 2D 平面中 ; 透视视图 ( Perspective View ) : 近大远小 , 符合正常人眼观察 3D 世界的规律

    2024年02月13日
    浏览(41)
  • css3 3D 转换 技巧详细解析与代码实例

    CSS3 3D转换是CSS3中的一项新特性,通过它我们可以比较容易地实现3D效果。在这里,我将向大家介绍CSS3 3D转换的一些基本概念、使用方法和常见技巧。 1. 基本概念 在使用CSS3 3D转换时,需要了解一些基础概念: 三维坐标系:x轴、y轴、z轴 旋转角度:在3D转换中,物体可以绕着

    2024年02月08日
    浏览(33)
  • CSS3基础之3D转换(1),前端开发架构

    3. 透视perspective 3.1`translateZ` 4. 3D旋转`rotate3d` 5. 3D呈现`transform-style` 1. 三维坐标系 ======================================================================== 三维坐标系 其实就是指立体空间,立体空间是由3个轴共同组成的 x轴: 水平向右 注意: x 右边是正值,左边是负值 y轴: 垂直向下 注意:

    2024年04月13日
    浏览(43)
  • 【Web2D/3D】CSS3的2D/3D转换、过渡、动画(第一篇)

    1. 前言         本篇开始介绍Web2D和3D相关基础知识,会从CSS3的2D/3D转换、过渡、动画,讲到Canvas 2D图形绘制,再到SVG,最后到WebGL。         坐标系:左上点是坐标原点(0,0),x轴正方向向右,y轴正方向向下,z轴正方向向外(垂直屏幕向外)。 2. 2D转换         CSS3的2D/3D旋

    2024年02月04日
    浏览(49)
  • 【CSS3】CSS3 3D 转换 ④ ( 3D 旋转 rotate3d | rotate3d 语法 | rotate3d 自定义轴旋转 | 元素旋转方向 - 左手准则 | 代码示例 )

    3D 旋转 指的是 在 三维空间坐标系 中 , 绕 X 轴 , Y 轴 , Z 轴 进行旋转 , 同时还可以绕 自定义轴 进行旋转 ; 2D 旋转只能 以 某个点为中心进行旋转 , 3D 旋转可以绕某个轴进行旋转 ; CSS3 中 3D 旋转 语法 : 绕 X 轴旋转 : 沿着 X 轴 正方向 旋转 45 度 ; 绕 Y 轴旋转 : 沿着 Y 轴 正方向

    2024年02月11日
    浏览(42)
  • CSS -- CSS3中3D转换相关属性讲解(translate3d,rotate3d,perspective,transform-style)

    我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。 3D特点: 近大远小。 物体后面遮挡不可见 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。 三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。 x轴:水平向右 注意:X右边是正值,左

    2024年02月05日
    浏览(65)
  • CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例(两面翻转的盒子、3D导航栏、旋转木马案例)

    目录 一、CSS3过渡(transition)(重点) 二、CSS3过渡练习——进度条案例 三、CSS3 2D转换(translate、rotate、scale、转换中心点transform-origin) 四、CSS3 动画 五、CSS3动画常见属性 五、热点图案例(动画) 六、速度曲线之steps步长(案例——奔跑的熊大) 七、CSS3 3D转换(3D 位移:t

    2024年02月03日
    浏览(47)
  • HTML5CSS3提高

    HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器 才支持,如果不考虑兼容性问题,可以大量使用这些新特性。 以前布局,我们基本用 div 来做。div 对于搜索引擎来说,

    2024年02月14日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包