css3中2D与3D页面的过渡与转换，，制作立方体相册源代码

最新推荐文章于 2024-05-18 06:08:21 发布

VIP文章三岁九年

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量338

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/xh0112/article/details/111313302

版权

2D与3D的过渡与转换

2D
3D
- 3D转换-旋转
- 3D位移
立方体相册

2D

过渡

过渡，2D转换
transition 过渡
之前：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。
css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。

transition-property:指定过渡的属性。
all为指定所有属性都有过渡效果。必须要有
transition-duration: 过渡的时间
单位可以是s或者ms。必须要有
transition-delay:指定过渡生效的延迟时间。
transition-timing-function:

ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速

这是个复合属性
transition：all 3s linear 1s;
过渡属性，完成时间，运动曲线，延迟时间。

示例

在这里插入图片描述
初始的样子

在这里插入图片描述
变换后的样子

2D转换-缩放

transform 属性。

缩放：
放大缩小。
格式
transform：scale(x,y);
x:代表水平方向的缩放倍数
y：代表垂直方向的缩放倍数。
如果只写一个值，代表等比例缩放。
不会改变真实宽高，也不会旁边的盒子造成影响
示例

在这里插入图片描述

正常属性值
缩放后。

转换位移。

位移 translate
格式：
tramsform：translate（水平位移，垂直位移）
属性值：
px 正值：向右或向下。
百分比是按照盒子本身的宽高。

只写一个值时，是水平位移。

示例
在这里插入图片描述

旋转

旋转：rotate
格式： transform：rotate（角度）
单位：deg

transform-origin: 变换原点
格式： transform-origin: 水平坐标垂直坐标
px
百分比按照盒子的宽高。50%=center
单词 left center等

transform 后面可以书写多个转换，但是书写顺序不同，效果不同。

对于
transform: translate(100px) rotate(90deg);
transform:rotate(90deg) translate(100px) ;
第一种会先位移，再旋转
第二种会先旋转，再位移。

旋转的默认值中心

示例
在这里插入图片描述
原始位置

在这里插入图片描述旋转90度后

倾斜

skew 倾斜属性
格式：transform：skew（水平倾斜角度，垂直倾斜角度）
单位是deg，正值顺时针，负值逆时针。

示例
在这里插入图片描述

3D

3D转换-旋转

3D旋转：
transform: rotate3D(x,y,z,deg);
x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，
deg表示旋转的角度。

也可以拆分来写
transform: rotateX（deg）X轴旋转
transform: rotateY（deg）Y轴旋转
transform: rotateZ（deg） Z轴旋转

旋转的方向：左手法则
左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。

视觉上看是3D效果需要给父级添加perspective: 200px; 大小z轴的高度
设置给变换盒子的父容器。
透视：
设置用户眼睛与屏幕的距离。
透视效果只是视觉上的呈现，不是真正的距离。
perspective:；

在这里插入图片描述
开始样式

X轴旋转可以看出有3D的效果了

3D位移

位移：
transform: translateX(); //沿着x轴移动
transform: translateY();//沿着Y轴移动
transform: translateZ();//沿着Z轴移动
transform: translate3d(x,y,z);

translateZ为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大。
translateZ为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。
translateZ为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。

在这里插入图片描述
同时向右下移动

反面隐藏
可用于旋转到背面不想显示出来可以设置旋转隐藏。

backface-visibility: hidden;

3D呈现
某个图形是由多个元素组成的。可以给这些元素的父元素添加一个transform-style：persevere-3d 来使其变成一个真正的3d图形。

transform-style：persevere-3d

立方体相册

这里给大家分享一个立方体相册的代码
这是鼠标悬停实现的效果可以旋转放大
在这里插入图片描述
代码块

<body>

最低0.47元/天解锁文章

三岁九年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css3中2D与3D页面的过渡与转换，，制作立方体相册源代码

2D的过渡与转换过渡2D转换-缩放转换位移。旋转倾斜过渡过渡，2D转换transition 过渡之前：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。transition-property:指定过渡的属性。all为指定所有属性都有过渡效果。必须要有transition-duration: 过渡的时间单位可以是s或者ms。必须要有transition-delay:指定过
复制链接

扫一扫