（CSS学习记录）：CSS3之3D 转换

其他 2020-10-03 17:46:46 阅读次数: 0

目录

3D 转换

认识 3D 转换

3D 转换

透视 perspective

translateZ

3D 旋转rotateX

3D呈现 transfrom-style

3D 转换

认识 3D 转换

  • 3D 的特点

    • 近大远小
    • 物体和面遮挡不可见
  • 三维坐标系
    • x 轴：水平向右 -- 注意：x 轴右边是正值，左边是负值
    • y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值
    • z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负值

3D 转换

  • 3D 转换知识要点
3D 位移 translate3d(x, y, z)
3D 旋转 rotate3d(x, y, z)
透视 perspctive
3D呈现 transfrom-style
  • 3D 移动 translate3d
    • 3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
    • transform: translateX(100px)：仅仅是在 x 轴上移动
    • transform: translateY(100px)：仅仅是在 y 轴上移动
    • transform: translateZ(100px)：仅仅是在 z 轴上移动
    • transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
  • 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充
  • 语法 ：
transform: translate3d(x, y, z)
  • 代码演示
transform: translate3d(100px, 100px, 100px)
/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
transform: translate3d(100px, 100px, 0)

透视 perspective

  • 透视的单位是像素
  • 透视需要写在被视察元素的父盒子上面
  • 注意下方图片
    • d：就是视距，视距就是指人的眼睛到屏幕的距离
    • z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大

  • 代码演示 
body {
  perspective: 1000px;
}

translateZ

  • translateZ 与 perspecitve 的区别
    • perspecitve 给父级进行设置，translateZ 给 子元素进行设置不同的大小
  • 案例：
body {
    perspective: 500px;
}

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;
    transform: translateZ(0);
}

3D 旋转rotateX

  • 3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转
  • 语法
transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度
  • 代码案例
div {
  perspective: 300px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateX(-45deg)
}

3D呈现 transfrom-style

  • 控制子元素是否开启三维立体环境
  • transform-style: flat 代表子元素不开启 3D 立体空间，默认的
  • transform-style: preserve-3d 子元素开启立体空间
  • 代码写给父级，但是影响的是子盒子
  • 案例：3D呈现transform-style

<!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: 500px;
        }
        
        .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>
  • 案例：旋转木马

<!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 {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
            background: url(media/pig.jpg) no-repeat;
        }
        
        section:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }
        
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                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(0) 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>
  • 案例：3D立方体盒子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		body {
			padding: 200px 300px;
		}
		ul {
			position: relative;
			list-style: none;
			width: 300px;
			height: 300px;
			transform: rotate3d(1, 1, 0, -45deg);
			transform-style: preserve-3d;
			/* perspective: 500;
			-webkit-perspective: 500;
			perspective-origin: 10% 10%; */
		}
		ul > li {
			position: absolute;
			top: 0;
			left: 0;
			width: 300px;
			height: 300px;
			line-height: 300px;
			text-align: center;
			font-size: 40px;
		}
		ul > li:nth-of-type(1) {
			background-color: #ccc;
			transform: translateZ(150px);
		}
		ul > li:nth-of-type(2) {
			background-color: skyblue;
			transform: translateZ(-150px) rotateY(180deg);
		}
		ul > li:nth-of-type(3) {
			background-color: greenyellow;
			transform: translateX(-150px) rotateY(-90deg);
		}
		ul > li:nth-of-type(4) {
			background-color: deeppink;
			transform: translateX(150px) rotateY(90deg);
		}
		ul > li:nth-of-type(5) {
			background-color: rebeccapurple;
			transform: translateY(-150px) rotateX(90deg);
		}
		ul > li:nth-of-type(6) {
			background-color: saddlebrown;
			transform: translateY(150px) rotateX(-90deg);
		}
	</style>
</head>
<body>
	<ul>
		<li>01-前面</li>
		<li>02-后面</li>
		<li>03-左面</li>
		<li>04-右面</li>
		<li>05-上面</li>
		<li>06-下面</li>
	</ul>
</body>
</html>
  • 案例：两面翻转的盒子

<!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 {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            /* 让背面的紫色盒子保留立体空间 给父级添加的 */
            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 {
            background-color: pink;
            z-index: 1;
        }
        
        .back {
            background-color: purple;
            /* 像手机一样 背靠背 旋转 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">小猪佩奇</div>
        <div class="back">pink老师</div>
    </div>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/baidu_41388533/article/details/108830929
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022