(CSS learning record): CSS3 3D conversion

Others 2020-10-03 18:22:43 views: null

table of Contents

3D conversion

Understanding 3D conversion

3D conversion

Perspective

translateZ

3D rotate rotateX

3D rendering transfrom-style

3D conversion

Understanding 3DConversion

  • 3D specialty

    • Near big far small
    • Object and surface occlusion is not visible
  • Three-dimensional coordinate system
    • x-axis: horizontal to the right-- note: the right side of the x-axis is positive, and the left is negative
    • y-axis: vertical downwards-- note: the bottom of the y-axis is positive, and the top is negative
    • z-axis: vertical screen- note: the outside is positive, the inside is negative

3D Conversion

  • 3D Knowledge points
3D Displacement translate3d(x, y, z)
3D Spin rotate3d(x, y, z)
perspective perspctive
3DPresent transfrom-style
  • 3D mobile translate3d
    • 3DThat is moved 2Dbased on the moving direction of a movable pay more, that is, the z-axis direction,
    • transform: translateX(100px): Just move on the x-axis
    • transform: translateY(100px): Just move on the y axis
    • transform: translateZ(100px): Just move on the z axis
    • transform: translate3d(x, y, z): Where x, y, z respectively refer to the distance of the axis to be moved
  • Note: The corresponding values ​​of x, y, z cannot be omitted, and there is no need to fill in with 0 to fill in
  • grammar:
transform: translate3d(x, y, z)
  • Code demo
transform: translate3d(100px, 100px, 100px)
/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
transform: translate3d(100px, 100px, 0)

perspective perspective

  • The unit of perspective is pixels
  • Perspective needs to be written on the parent box of the inspected element
  • Pay attention to the picture below
    • d: It is the viewing distance, which is the distance between the human eye and the screen
    • z: It is the z-axis, the larger the z-axis (positive value), the larger the object we see

 

  • Code demo 
body {
  perspective: 1000px;
}

 

translateZ

  • translateZWith perspecitvedistinction
    • perspecitveSet the parent translateZand set different sizes for the child elements
  • Case:
body {
    perspective: 500px;
}

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

3D rotate rotateX

  • 3D rotation means that the element can be rotated along the x-axis, y-axis, z-axis or a custom axis in a three-dimensional plane
  • grammar
transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度
  • Code case
div {
  perspective: 300px;
}

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

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

3D rendering transfrom-style

  • Control whether the child element opens the three-dimensional environment
  • transform-style: flatOn behalf of the sub-element is not open 3Dthree-dimensional space, the default
  • transform-style: preserve-3d Child elements open three-dimensional space
  • The code is written to the parent, but it affects the child box
  • Case: 3D rendering 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>
  • Case: Carousel

<!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>
  • Case: 3D cube box

<!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>
  • Case: a box flipped on both sides

<!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>

 

Guess you like

Origin blog.csdn.net/baidu_41388533/article/details/108830929
Recommended
TIOBE May list: Fortran “resurrected” into Top 10
GCC 14.1 released
Ranking
B. Little Girl and Game【1300 / 回文字符串 博弈论】
CIKERS Shane 20190613
"Javascript advanced programming" study notes - the constructor and prototype
beeline hiveserver2 start
springboot - Automatically backup mysql data every day
Data Storage Full Solution--Detailed Persistence Technology
Detailed Explanation of Spring Web MVC DispatcherServlet—Official Original
TCP / IP protocol layers structure and function
Command type literal pos: unknown； Fallback type literal pos: unknown] with root cause
Design of multifunctional curtain controller with indoor anti-theft alarm
Daily
More
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)

Code World

© 2018 codetd.com