u3d中ui图片怎么旋转_UI设计：使用CSS3 3D旋转创建Cool OS X翻转效果

最新推荐文章于 2024-05-27 09:00:00 发布

cune1359

最新推荐文章于 2024-05-27 09:00:00 发布

阅读量765

点赞数

文章标签： css html js css3 java ViewUI

CSS3规范中有两种类型的转换，即2D和3D。在之前的文章中，我们讨论了CSS3 Transform 2D 。因此，这一次，我们将研究3D空间中的变换元素，特别是在本文中，我们还将创建OSX翻转效果 。

单击下面的“查看演示”以查看最终结果。

观看演示

3D旋转语法

3D空间中的旋转基本上类似于我们之前讨论的2D。要垂直旋转元素，我们可以用这种方式编写它。

-webkit-transform: rotateX(Ndeg);
-moz-transform: rotateX(Ndeg);
transform: rotateX(Ndeg);

我们还可以通过这种方式水平翻转。

-webkit-transform: rotateY(Ndeg);
-moz-transform: rotateY(Ndeg);
transform: rotateY(Ndeg);

您可以查看许多很棒的资源，以进一步研究CSS3 3D Transform。以下是我们的建议。

CSS 3-D转换简介 – 24种方式
CSS3转换浏览器支持 – CanIUse.com
三维冒险：CSS 3D变换 – SmashingMagazine

OSX翻转效果

如上所述，我们将应用CSS3转换来创建OSX或iOS翻转效果。如果您正在使用这些操作系统，则可能已经熟悉这些效果。在OSX中，您通常可以在仪表板小工具中找到它们。

过去，创建这种效果完全是通过JavaScript库实现的。但是今天，我们可以通过将其与CSS3 Transform结合起来使其变得更简单。

资产

这次，我们仅需要Dribbble的jQuery和iOS Passbook的PSD作为我们的图形UI。使用Photoshop，我们可以进行一些调整。

然后，选择一张存折图形并将其保存在两个文件中：正面和背面。在这种情况下，我们选择了星巴克存折，如下所示。

HTML

然后，让我们创建一个新的基本HTML文档，并将以下标记放入<body> 。

<section class="passbook">
	<div class="card front">
		<img src="img/starbuck-front.png">
		<a href="#" class="info flip">i</a>
	</div>
	<div class="card back">
		<ul class="nav">
			<li class="title">Starbuck Coffee</li>
			<li class="button done"><a class="flip" href="#">Done</a></li>
		</ul>
		<img src="img/starbuck-back.png">
	</div>
</section>

正如您在上面看到的，我们在两个不同的<div>包含正面和背面。在正面，我们将有一个链接，单击该链接即可翻转存折。在背面，我们还有一个链接可以将其向后翻转。

CSS

我假设您已经创建了一个新CSS文件。在此样式表中，我们将首先指定“存折”尺寸并将转换样式设置为“ preserve-3d ，这样子元素也将转换为3D。并且，我们还添加了过渡效果以使翻转顺利进行。

.passbook {
	position: relative;
	width: 300px;
	height: 380px;
	margin-bottom: 100px;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;

	margin-left: 85px;
}

然后，我们还将卡的位置设置为absolute ，因此每张卡都将堆叠在一起。我们还需要使用backface-visibility属性隐藏backface-visibility 。

.card { 
	position: absolute;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

前脸

现在，我们将装饰样式添加到正面的链接上，如下所示。

.front .info {
	width: 18px;
	height: 18px;
	border-radius: 21px;
	font-family: "Georgia", serif;
	font-style: italic;
	background-color: #075621;
	color: #fff;
	text-align: center;
	position: absolute;
	right: 10px;
	bottom: 15px;
	font-size: 11px;
	line-height: 18px;
	display: block;
	text-decoration: none;
}

我们还需要通过指定较高的z-index将正面放置在背面上方。

.front {
	z-index: 1;
}

背面

对于背面，我们需要首先翻转它。

.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

然后，我们在导航中添加装饰样式，包括更改文本颜色，为链接按钮添加渐变颜色并将其放置在适当的位置。

.back .nav {
	padding: 0;
	margin: 0;
	color: #fff;
	font-size: 12px;
	width: 100%;
	font-weight: bold;
}
.back .nav li {
	display: inline;
	position: absolute;
	top: 18px;
}
.back .nav a {
	font-weight: bold;
	text-decoration: none;
	padding: 7px 10px;
	border: 1px solid #095d25;
	border-radius: 5px;
	color: #fff;

	background: -moz-linear-gradient(top,  rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.5) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(0,0,0,0.5)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
}
.back .nav a:hover {
	background: -moz-linear-gradient(top,  rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.55) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(0,0,0,0.55)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
}
.back .nav .title {
	left: 105px;
}
.button.done {
	right: 10px;
}

最后，像这样，我们添加一个类来水平翻转存折。

.rotate-3d {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

jQuery的

jQuery部分非常简单。首先，不要忘记在<head>中链接jQuery库，就像这样。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

然后，我们使用jQuery中的toggleClass函数应用我们在上面的样式表中添加的.rotate-3d类。

<script type="text/javascript">
	$(document).ready(function(){
		$('a.flip').click(function(event){
			$('.passbook').toggleClass('rotate-3d');
			event.preventDefault();
		});
	});
</script>

这就是我们需要的所有代码。这显然比单纯使用JavaScript来实现类似效果要简单得多。与往常一样，您现在可以在下面的链接中查看演示并下载源。

翻译自: https://www.hongkiat.com/blog/css3-3d-transforms/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
u3d中ui图片怎么旋转_UI设计：使用CSS3 3D旋转创建Cool OS X翻转效果

CSS3规范中有两种类型的转换，即2D和3D。在之前的文章中，我们讨论了CSS3 Transform 2D 。因此，这次，我们将研究3D空间中的变换元素，特别是在本文中，我们还将创建OSX翻转效果。单击下面的“查看演示”以查看最终结果。观看演示 3D旋转语法 3D空间中的旋转基本上类似于我们之前讨论的2D。要垂直旋转元素，我们可以用这种方式编写它。 -webki...
复制链接

扫一扫