CSS3:3D变换动画

CSS3:3D变换动画

2D状态下，给元素设置沿着X轴旋转45deg

<!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>CSS3:3D动画</title><style>.box {margin: 100px;width: 200px;height: 200px;border: 1px solid #000;}.item {width: 200px;height: 200px;line-height: 200px;text-align: center;background: palegreen;color: #fff;font-size: 30px;transform: rotateX(45deg);}</style>
</head><body><div class="box"><div class="item"></div></div>
</body></html>

效果图：

图一为2D空间中元素的初始状态

图二为2D空间中元素沿着X轴旋转45deg的状态。

图三为3D空间中元素沿着X轴旋转45deg的状态。（若要想元素实现立体效果，需要给其父级元素设置景深：perspective: 600px;）

perspective 景深

定义 3D 元素距视图的距离，以像素计。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

transform-style

transform-style指定嵌套元素是怎样在三维空间中呈现。

transform-style: flat（默认情况下：2D效果）|preserve-3d（保留3D空间）;

注：设置了transfrom-style:preserve-3d的元素，不能防止子元素溢出，即不能设置overflow:hidden；否则persever-3d失效；

<!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>CSS3:3D动画</title><style>.box {position: relative;margin: 100px;width: 200px;height: 200px;border: 1px solid #000;perspective: 600px;/*设置景深*/transform-style: preserve-3d;/*保留3D效果*/transform: rotateY(20deg);}.item {position: absolute;top: 0;left: 0;width: 200px;height: 200px;line-height: 200px;text-align: center;color: #fff;font-size: 30px;}.one {background: palegreen;transform: rotateX(45deg);}.two {background: paleturquoise;transform: rotateX(-45deg);}</style>
</head><body><div class="box"><div class="item one">one</div><div class="item two">two</div></div>
</body></html>

实现效果：

此时，one与two元素是3D元素，但其父级box元素仍是2D平面。且子元素会向着Z轴方向超出，所以不能给其父元素设置overflow：hidden属性。

下图为给box设置overflow: hidden;属性。此时，transform-style: preserve-3d;属性失效。

若要实现两个元素集体转动：将其共同的父元素box转动即可：（如下效果：由于box是一个平面，并没有景深（离屏幕近的大，离屏幕远的小）的效果，即无法看到真实的3D效果）

因此，需要给box的父级元素设置景深属性

若给box设置景深，则box将成为一个梯形

现在给box增加一个父级元素wrapper并设置如下属性。

<!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>CSS3:3D动画</title><style>.wrapper {perspective: 600px;width: 200px;height: 200px;margin: 100px;border: 1px solid #000;}.box {position: relative;width: 200px;height: 200px;/*设置景深*/transform-style: preserve-3d;/*保留3D效果*/animation: move 5s linear infinite;}.item {position: absolute;top: 0;left: 0;width: 200px;height: 200px;line-height: 200px;text-align: center;color: #fff;font-size: 30px;}.one {background: palegreen;transform: rotateX(45deg);}.two {background: paleturquoise;transform: rotateX(-45deg);}@keyframes move {0% {transform: rotateX(0);}100% {transform: rotateX(360deg);}}</style>
</head><body><div class="wrapper"><div class="box"><div class="item one">one</div><div class="item two">two</div></div></div>
</body></html>

效果图：3D空间中正方体旋转。

translate3d(x,y,z,n)

perspective-origin视点的位置，（视点的不同会看到不同的图案形状）

perspective-origin: x y;//默认50% 50% 50%;

backface-visibility

backface-visibility 属性定义该元素背面是否可见。

backface-visibility: visible | hidden;

CSS3:3D变换动画相关推荐

深入理解css3 3d变换
转载地址:https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ ...
13、CSS3 3D及动画
目录一.CSS3 3D 1.3d的概念 2.景深和近大远小(视觉3d) perspective 3.页面中的3d空间设置(空间3d) transform-style 4.3d位移 translate ...
CSS3 3D变换--扑克牌翻转
学了css的3D变换后,想自己做一个扑克牌的翻转效果,那么怎么来实现呢,一起来试试吧! 思路: 首先写出牌面的文字和结构,在设置牌面的变换时,将变换的牌正面和背面放在一个父容器里,即需要四个父容器,这 ...
css3 3d变换和动画——回顾
1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现. 语法:transform-style: flat | preserve-3d flat 表示所有子元素在2D平面呈现. p ...
CSS3 3D旋转动画
话不多说,先上效果图: 代码: <span style="font-size:18px;"><span style="font-size:18px;&q ...
html控制弯曲图,html – CSS3 3D弯曲视角
CSS3 3D变换动画非常棒.我想知道是否有办法让某些东西弯曲. 这个例子翻转了(纸质)div,但是动画看起来很僵硬,因为实际上,当你翻动纸张时,它会弯曲一点. 那么我忽略的任何属性,或者是一个让它看 ...
CSS3的2D、3D变换、过度与动画效果
1. 2D转换方法在2D转换方法中,存在对元素进行旋转.缩放.拉伸.移动的属性效果.此处主要讲解transform属性中的旋转和缩放.位移效果. 1.1 旋转rotate() 通过下述代码的设置可以 ...
好用的css3特性-动画和3d变换
上一篇文章总结了过渡和2D变化,这一篇来总结一下动画和3D变换,动画可用的场景也很多,比如在加载的页面的时候,可以放置一个gif图,也可以自定义小动画来缓解用户等待的焦虑感,比如以下三个小圆圈转圈圈的 ...
CSS3 3D transform变换
transform的坐标是需要了解的特性. 我们的rotateX,rotateY,rotateZ,和translateX,translateY等都是基于相同的坐标系来定位的. 3D的坐标如下入所示: ...

CSS3:3D变换动画

CSS3:3D变换动画相关推荐

最新文章

热门文章