css 3 3d翻转
Today I would like to show you how to create a little component with a realistic touch. The idea is based on the sweet paper effect found in the video of the Google Developer Stories. Maybe you have created these kind of paper effects when you were a kid; basically something opens or rotates when pulling or pushing some handle.
今天，我想向您展示如何创建具有真实感的小组件。 这个想法是基于Google Developer Stories视频中的甜纸效果。 也许您小时候就已经创建了此类纸张效果； 基本上，拉动或推动某些手柄时，东西会打开或旋转。
We’ll create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.
我们将创建一个带有手柄的圆圈，该圆圈将在单击小手柄后打开，并借助CSS 3D变换和阴影/渐变创建逼真的3D翻转效果。
Check out 00:27 of the same video on HTML5 Rocks so that you can see and understand the effect.
请在HTML5 Rocks上观看同一视频的00:27，以便您可以看到并了解效果。
标记 (The Markup)
So, let’s start with the markup. We’ll use some divisions for the shading effects, the handle pieces and the circle parts. What we need, is a main wrapper with the class fc-wrapper which will be a circle. On top of that we will add an overlay which will make the right part of the circle darker once we open the rest. From this lower-most circle we will actually just see the right part. The div with the class fc-handle-pull will be the right-most handle piece outside of the circle. We’ll add a container for the perspective and inside we’ll add the mentioned overlay for the right part and also the second handle piece (it looks like one, but it’s actually two pieces) which has the class fc-handle-out.
因此，让我们从标记开始。 我们将为阴影效果，手柄部分和圆形部分使用一些划分。 我们需要的是一个带有fc-wrapper类的主包装器，它将是一个圆形。 最重要的是，我们将添加一个叠加层，一旦打开其余部分，该叠加层将使圆圈的右侧部分变暗。 从这个最低的圆圈，我们实际上将看到正确的部分。 类别为fc-handle-pull的div将是圆外最右边的手柄。 我们将为透视图添加一个容器，并在内部为右侧部分添加上述覆盖层，并为类fc-handle-out的第二个手柄(看起来像一个，但实际上是两个)。
Now, we need a division for the left part which will be visible once we open the other half. Here we will add our quote. Note, that we are also adding some overlays which will help us make the opening animation look more realistic.
现在，我们需要为左侧部分进行划分，一旦我们打开另一半就可以看到。 在这里，我们将添加报价。 请注意，我们还添加了一些叠加层，这将有助于我们使打开的动画看起来更加逼真。
The division with the class fc-flip will contain a front part and a back part. The back part will not be visible because we will rotate it 180 degrees on the Y-axis. It will serve as the backface of the front part. We’ll add the last bit of the handle to the front since we will want to move it when “opening” the flip container.
fc-flip类的分区将包含一个前部分和一个后部分。 后面的部分将不可见，因为我们会将其在Y轴上旋转180度。 它将用作前部的背面。 我们将把句柄的最后一位添加到前面，因为我们想在“打开”翻转容器时将其移动。
<div class="fc-wrapper">
<!-- right-most handle piece -->
<div class="fc-handle fc-handle-pull"></div>
<div class="fc-perspective">
<!-- right part overlay; get's darker -->
<div class="fc-overlay fc-overlay-reverse"></div>
<!-- middle handle piece -->
<div class="fc-handle fc-handle-out"><div></div></div>
<!-- inner bottom content part -->
<div class="fc-bottom">
<div class="fc-bottom-bg">
<div class="fc-content">
<p>I can live with doubt, and uncertainty, and not knowing. I think it's much more interesting to live not knowing than to have answers which might be wrong. <span>Richard Feynman</span></p>
</div>
</div>
<div class="fc-overlay fc-overlay-solid"></div>
</div><!-- //fc-bottom -->
<!-- front and back of the flipping half -->
<div class="fc-flip">
<div class="fc-front">
<div class="fc-inner">
<div class="fc-overlay fc-overlay-left"></div>
<!-- left-most part of handle -->
<div class="fc-handle fc-handle-in"><div></div></div>
<div class="fc-content">
<h3>Free revelations</h3>
<p>by Codrops</p>
</div>
</div>
</div><!-- //fc-front -->
<div class="fc-back">
<div class="fc-inner">
<div class="fc-content">
<div class="feynman">
<span>1918 – 1988</span>
</div>
</div>
<div class="fc-overlay fc-overlay-right"></div>
</div>
</div><!-- //fc-back -->
</div><!-- //fc-flip -->
</div><!-- //fc-perspective -->
</div><!-- //fc-wrapper -->
So, basically, we will have a circular left part and a circular right part that will flip open once we click on the right-most part of the handle.
因此，基本上，我们将具有一个圆形的左侧部分和一个圆形的右侧部分，一旦单击手柄的最右侧部分，它们就会翻转打开。
Let’s style this whole thing.
让我们为整个事情设计样式。
CSS (The CSS)
The main wrapper will be 300 pixels high and wide and we’ll center it on the page. For all of the circle elements we will use a paper-like texture image that we’ll overlay on a background color, giving it a realistic touch. The wrapper will be shaped as a circle since we give it a border radius of 50%:
主包装纸的高度和宽度将为300像素，我们将其在页面上居中放置。 对于所有的圆形元素，我们将使用类似纸的纹理图像，将其叠加在背景色上，使其具有逼真的感觉。 由于我们给包装器的边界半径为50％，因此其形状将为圆形：
.fc-wrapper {
width: 300px;
height: 300px;
position: relative;
margin: 30px auto 0;
background: #846aa7 url(../images/paper.png) repeat center center;
border-radius: 50%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
Let’s take a look at the handle pieces. All the pieces will have the fc-handle class in common:
让我们看一下手柄片。 所有部分都具有共同的fc-handle类：
.fc-handle {
position: absolute;
top: 50%;
right: 0px;
width: 80px;
height: 30px;
margin-top: -15px;
background: #775b9d;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
The next class will define the position for the middle part:
下一个类将定义中间部分的位置：
.fc-handle-out {
right: -65px;
width: 65px;
}
fc-handle-in is the left most part:
fc-handle-in是最左侧的部分：
.fc-handle-in {
right: 80px;
}
The inner divisions of the two handle pieces that are on top of the circle will serve as shadows. When we “pull” the handle from the right, the shadow dropping on the circle will need to look like a triangle that gets taller. We will use two rotated divs with a diagonal gradient, simulating exactly that:
圆顶部的两个手柄部分的内部分隔将用作阴影。 当我们从右侧“拉”手柄时，滴在圆上的阴影将需要看起来像一个变高的三角形。 我们将使用两个旋转的带有对角线渐变的div，精确地模拟如下：
.fc-handle div {
position: absolute;
height: 0px;
width: 80px;
top: 30px;
content: '';
opacity: 0.3;
}
.fc-handle-in div {
background:
linear-gradient(
75deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 73%,
rgba(0,0,0,0.65) 100%
);
}
.fc-handle-out div {
background:
linear-gradient(
170deg,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 27%,
rgba(0,0,0,0) 100%
);
}
The following pseudo-element will be used to create an inset shadow effect on the middle piece:
以下伪元素将用于在中间片段上创建嵌入阴影效果：
.fc-handle-out::after {
position: absolute;
right: 0px;
width: 4px;
height: 31px;
content: '';
background:
linear-gradient(
to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.15) 100%
);
}
The right-most piece, i.e. the one that will trigger the opening of the circle booklet when clicked, will be positioned outside of the circular shape:
最右边的部分，即单击时将触发圆形小册子打开的部分，将位于圆形的外部：
.fc-handle-pull {
right: auto;
left: 100%;
margin-left: 5px;
width: 30px;
box-shadow:
1px 0 1px rgba(0,0,0,0.1),
inset 3px 0 2px rgba(0,0,0,0.2);
cursor: pointer;
}
Let’s give it some depth with the help of a gradient:
让我们借助渐变为它提供一些深度：
.fc-handle-pull::after {
content: '';
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
background:
linear-gradient(
to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 69%,
rgba(0,0,0,0.08) 100%
);
}
The bottom part that will contain the quote content will have the following style:
包含报价内容的底部将具有以下样式：
.fc-bottom {
width: 220px;
height: 100%;
overflow: hidden;
position: absolute;
opacity: 0;
}
We are setting the opacity to 0 because we don’t want it to cause jagged edges of the circle when it’s closed. There will be an overlay darkening this part so will notice it if we don’t “hide” it. Note, that we are setting the overflow to hidden. This will make the division with the following class be cut off on the right:
我们将不透明度设置为0，因为我们不希望它在闭合时导致圆弧的锯齿状边缘。 会有覆盖层使该部分变暗，因此如果我们不“隐藏”该部分，则会注意到它。 注意，我们将溢出设置为隐藏。 这将使右侧具有以下类别的部门被切断：
.fc-bottom-bg {
background: #846aa7 url(../images/paper.png) repeat center center;
border-radius: 50%;
width: 300px;
height: 100%;
}
Now, let’s take a look at the overlays that will help us with a realistic look. Let’s first define a common style for all of them:
现在，让我们看一下可以帮助我们获得逼真的外观的叠加层。 首先，为它们定义一个通用样式：
.fc-overlay {
top: 0px;
left: 0px;
width: 300px;
height: 100%;
position: absolute;
border-radius: 50%;
}
The solid overlay will simply be a semi-transparent black division. This one will be used to make a part look dark initially (like the bottom content). When opening the circle, we will lower the opacity level in order to fade it out (the “open” states will be shown in the end):
实心叠加层将只是一个半透明的黑色分割。 最初，该部件将用于使部件看起来较暗(如底部内容)。 打开圆圈时，我们将降低不透明度级别以使其淡出(最后将显示“打开”状态)：
.fc-overlay-solid {
background: rgba(0,0,0,0.6);
}
The next overlay will do the opposite: it won’t be visible initially but then we will use it to darken things once we open the booklet:
下一个叠加层会做相反的事情：它最初不会显示，但是一旦打开小册子，我们将使用它来使事物变暗：
.fc-overlay-reverse {
background: rgba(0,0,0,0);
}
That overlay will be used for the right part of the circle that will get covered by the opening bit.
该叠加层将用于圆的右部分，该圆部分将被开Kong位覆盖。
The next two overlays will have semi-transparent gradients that we will control using opacity:
接下来的两个叠加层将具有半透明的渐变，我们将使用不透明度来控制渐变：
.fc-overlay-left {
background: linear-gradient(to right, transparent 27%, rgba(0,0,0,0.30) 80%);
opacity: 0.5;
}
.fc-overlay-right {
background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.30) 100%);
opacity: 0.5;
}
The left overlay will be used on the front part and the right overlay on the back part. Both will transition to an opacity of 1 once the booklet opens.
左叠层将用于前部，右叠层将用于后部。 小册子打开后，两者都将转换为不透明度1。
The perspective container will, of course, have perspective, and we will make it a bit narrower. The idea is to cut off the circular divisions that we’ll have inside:
透视图容器当然会具有透视图，我们将使其变窄一些。 这个想法是要切断我们内部的循环划分：
.fc-perspective {
width: 220px;
height: 300px;
position: relative;
perspective: 1000px;
}
The flip container will be rotated to open the whole thing, revealing the back part. To flip in the right place, we need to set the transform-origin to where the fold is, which is at 220 pixel:
翻转容器将旋转以打开整个物品，露出后部。 要在正确的位置翻转，我们需要将transform-origin设置为折叠的位置，即220像素：
.fc-flip {
width: 100%;
height: 100%;
position: absolute;
transform-origin: 220px 0px;
}
The back and the front division will have the following common style:
后面和前面的分隔将具有以下共同样式：
.fc-flip > div {
display: block;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
position: absolute;
}
Their width will be 220px and since the overflow is set to hidden, the circular shapes of the inner divs will be cut off.
它们的宽度为220像素，并且由于将溢出设置为隐藏，因此内部div的圆形将被切除。
The back part will be rotated -180 degrees in 3D (on the Y-axis):
背部将在3D方向(在Y轴上)旋转-180度：
.fc-flip .fc-back {
transform: rotate3d(0,1,0,-180deg);
}
Note, that we are not defining the necessary 3D properties here because we don’t want to repeat it for every class. We will gather all the respective class and define those properties later, at once.
注意，这里我们没有定义必要的3D属性，因为我们不想在每个类中都重复它。 我们将收集所有各自的类，并在以后立即定义那些属性。
The inner parts will have the circular shape and we’ll give them the paper texture:
内部零件将具有圆形形状，我们将为它们提供纸张纹理：
.fc-flip .fc-inner {
border-radius: 50%;
width: 300px;
height: 100%;
position: absolute;
background: #846aa7 url(../images/paper.png) repeat top right;
}
.fc-flip .fc-back .fc-inner {
margin-left: -80px;
background-color: #553c77;
box-shadow: inset 2px 0 3px rgba(0,0,0,0.1);
}
The back content will need to be “pulled” to the left so that the circle is cut off on the left side and not on the right like the one of the front part.
后面的内容将需要向左“拉”，以使圆圈在左侧而不是在右侧像前一部分一样被切掉。
Now, let’s style the content elements:
现在，让我们对内容元素进行样式设置：
.fc-content {
width: 220px;
padding: 20px;
text-align: right;
position: relative;
height: 100%;
}
.fc-back .fc-content {
margin-left: 80px;
}
.fc-bottom-bg .fc-content {
padding-top: 40px;
}
.fc-content p {
font-size: 12px;
line-height: 22px;
font-family: "Montserrat", sans-serif;
text-shadow: 0 -1px 1px rgba(255,255,255,0.1);
color: #3b2954;
padding: 0 0 0 31px;
}
.fc-flip .fc-front h3,
.fc-flip .fc-front p {
position: absolute;
text-align: right;
width: 180px;
text-shadow: 0 -1px 1px rgba(255,255,255,0.1);
color: #3b2954;
}
.fc-flip .fc-front h3,
.feynman span {
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
font-size: 17px;
letter-spacing: 1px;
font-weight: normal;
}
.fc-flip .fc-front h3 {
top: 30px;
left: 15px;
}
.feynman {
width: 255px;
height: 255px;
position: absolute;
overflow: hidden;
top: 50%;
left: -55px;
border-radius: 50%;
box-shadow: 2px 0 3px rgba(0,0,0,0.3);
margin-top: -127px;
background: transparent url(../images/feynman.png) no-repeat center right;
}
.feynman span {
text-align: center;
width: 100px;
height: 5px;
line-height: 30px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
bottom: 40px;
right: 80px;
font-size: 13px;
position: absolute;
}
.fc-flip .fc-front h3 span{
font-size: 40px;
}
.fc-flip .fc-front p,
.fc-bottom-bg .fc-content span {
bottom: 50px;
left: 15px;
font-family: "Dancing Script", Georgia, serif;
font-weight: 700;
font-size: 22px;
}
.fc-bottom-bg .fc-content span {
font-size: 18px;
display: block;
color: #fff;
padding: 10px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
transform: rotate(-3deg);
}
Let’s gather all the classes that will have a transition:
让我们收集所有将要进行转换的类：
.fc-flip .fc-back .fc-inner,
.fc-overlay,
.fc-handle,
.fc-handle div,
.fc-flip,
.fc-bottom{
transition: all 0.6s ease-in-out;
}
.fc-bottom{
transition-delay: 0.6s;
}
The next properties are important for making the 3D rotation work properly:
接下来的属性对于使3D旋转正常工作很重要：
.fc-flip,
.fc-flip .fc-inner,
.fc-handle {
transform-style: preserve-3d;
}
.fc-flip > div,
.fc-flip .fc-inner,
.fc-flip .fc-front h3,
.fc-handle,
.fc-handle div,
.fc-overlay,
.fc-flip .fc-front p,
.fc-flip .fc-front span {
backface-visibility: hidden;
}
When we open the circular booklet we will apply the class fc-wrapper-open to the main wrapper. Let’s define the “open” states for all the elements.
当打开圆形小册子时，我们将fc-wrapper-open类应用于主包装器。 让我们为所有元素定义“打开”状态。
The left-most piece of the handle will shrink to a width of 0. If you watch the paper effect in the video, you will notice that it gets pulled to the right, though the slit:
手柄的最左侧部分将缩小到0的宽度。如果您观看视频中的纸张效果，您会注意到它被拉到右侧，尽管有缝隙：
.fc-wrapper.fc-wrapper-open .fc-handle-in {
width: 0px;
}
The diagonal gradients that will serve as the shadow for the two handle pieces will become taller:
用作两个手柄的阴影的对角渐变将变得更高：
.fc-wrapper.fc-wrapper-open .fc-handle-in div {
height: 180px;
}
.fc-wrapper.fc-wrapper-open .fc-handle-out div {
height: 100px;
}
The background color of the two first handle pieces will become darker:
前两个手柄的背景颜色将变深：
.fc-wrapper.fc-wrapper-open .fc-handle {
background-color: #513a70;
}
The right-most handle will get wider because we are simulating the pulling of the whole handle:
最右边的手柄将变宽，因为我们正在模拟整个手柄的拉动：
.fc-wrapper.fc-wrapper-open .fc-handle-pull {
width: 155px;
background: #775b9d;
}
The background color of the back part content will become lighter:
背面内容的背景色将变浅：
.fc-wrapper.fc-wrapper-open .fc-flip .fc-back .fc-inner {
background-color: #846aa7;
}
The overlays will increase in opacity:
叠加层的不透明度会增加：
.fc-wrapper.fc-wrapper-open .fc-overlay {
opacity: 1;
}
The solid overlay will fade out:
实心叠加层将逐渐消失：
.fc-wrapper.fc-wrapper-open .fc-overlay-solid {
background: rgba(0,0,0,0);
}
And the reverse overlay will become darker:
并且反向叠加将变得更暗：
.fc-wrapper.fc-wrapper-open .fc-overlay-reverse {
background: rgba(0,0,0,0.4);
}
The bottom part will become visible immediately (we remove the transition here, but when it closes it will fade):
底部将立即可见(我们在此处删除了过渡，但是当它关闭时它将消失)：
.fc-wrapper.fc-wrapper-open .fc-bottom{
opacity: 1;
transition: none;
}
And of course, the most important thing that is going to happen: the rotation of the flip container:
当然，最重要的事情将要发生：翻转容器的旋转：
.fc-wrapper.fc-wrapper-open .fc-flip {
transform: rotate3d(0,1,0,175deg);
}
And that’s all the style. Now, let’s take a look at the few lines of JavaScript that will help us apply the class and add some swipe support for mobile.
这就是所有样式。 现在，让我们看一下几行JavaScript，它们将帮助我们应用该类并为移动设备添加一些滑动支持。
JavaScript (The JavaScript)
When we click on he right handle piece, we will apply the class fc-wrapper-open to the main container. We’ll define two simple functions for opening and closing. We’ll also add swipe support using Hammer.js and its jQuery plugin:
当我们单击右手柄时，我们会将fc-wrapper-open类应用于主容器。 我们将定义两个简单的打开和关闭函数。 我们还将使用Hammer.js及其jQuery插件添加滑动支持：
$(function() {
var $wrapper= $( '#fc-wrapper' ),
$handle = $wrapper.children( 'div.fc-handle-pull' );
$handle.on( 'click', function( event ) {
( $handle.data( 'opened' ) ) ? close() : open();
} );
$wrapper.hammer().bind( 'dragend', function( event ) {
switch( event.direction ) {
case 'right' : open(); break;
case 'left' : close(); break;
}
});
function open() {
$wrapper.addClass( 'fc-wrapper-open' );
$handle.data( 'opened', true );
}
function close() {
$wrapper.removeClass( 'fc-wrapper-open' );
$handle.data( 'opened', false );
}
} );
That’s all, hope you enjoy it and find it inspiring!
仅此而已，希望您喜欢它并发现它鼓舞人心！
翻译自: https://tympanus.net/codrops/2012/07/20/3d-flipping-circle-with-css3-and-jquery/
css 3 3d翻转
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
