2D and 3D
Posted wxy0715
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2D and 3D相关的知识，希望对你有一定的参考价值。
2D
<!-- transform transform:旋转 rotate(30deg); translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。transform: translate(50px,100px); scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数： transform:skew(<angle> [,<angle>]);分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 transform:matrix(0.866,0.5,-0.5,0.866,0,0); matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。 -->
3D
<!-- 旋转老k --> <!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{ margin: 0; padding: 0; } .div{ width: 155px; height: 219px; position: relative; margin: 300px auto; } .div img{ width: 155px; height: 219px; position: absolute; left: 0; top: 0; transition: transform 2s; transform-origin: left top; } .div:hover>img:nth-of-type(1){ transform: rotate(60deg); } .div:hover>img:nth-of-type(2){ transform: rotate(120deg); } .div:hover>img:nth-of-type(3){ transform: rotate(180deg); } .div:hover>img:nth-of-type(4){ transform: rotate(240deg); } .div:hover>img:nth-of-type(5){ transform: rotate(300deg); } .div:hover>img:nth-of-type(6){ transform: rotate(360deg); } </style> </head> <body> <div class="div"> <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt=""> <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt=""> <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt=""> <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt=""> <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt=""> <img src="./../../../数据库/图片//jpg图片//老k.jpg" alt=""> </div> </body> </html> <!-- 转换属性 下表列出了所有的转换属性： 属性 描述 CSS transform 向元素应用 2D 或 3D 转换。 transform-origin 以某一个点转动 允许你改变被转换元素的位置。 transform-style 规定被嵌套元素如何在 3D 空间中显示 。 perspective-3D 规定 3D 元素的透视效果。 perspective-origin 规定 3D 元素的底部位置。 backface-visibility 定义元素在不面对屏幕时是否可见。 3D转换方法 函数描述 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate3d(x,y,z) 定义 3D 转化。 translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。 translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。 translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。 scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。 scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿 X 轴的 3D 旋转。 rotateY(angle) 定义沿 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿 Z 轴的 3D 旋转。 perspective(n) 定义 3D 转换元素的透视视图。 -->
以上是关于2D and 3D的主要内容，如果未能解决你的问题，请参考以下文章