2D and 3D
程序员文章站
2022-03-25 23:43:57
...
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 转换元素的透视视图。
-->
上一篇： 汉族考生报考民族大学的利弊：汉族上民族类大学好吗？
下一篇： HTML form表单提交方法案例详解