.left,
.right {
position: fixed;
top: 0;
bottom: 0;
height: 1.5em;
margin: auto;
}
.left {
left: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
-ms-transform: rotate(-90deg) translate(-50%, 50%);
-o-transform: rotate(-90deg) translate(-50%, 50%);
transform: rotate(-90deg) translate(-50%, 50%);
}
.right {
right: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: rotate(90deg) translate(50%, 50%);
-moz-transform: rotate(90deg) translate(50%, 50%);
-ms-transform: rotate(90deg) translate(50%, 50%);
-o-transform: rotate(90deg) translate(50%, 50%);
transform: rotate(90deg) translate(50%, 50%);
}
在线预览：http://codepen.io/anon/pen/FtyEG
分享到：
相关推荐
3. **定位**：`position`属性（如`relative`、`absolute`和`fixed`）在创建浮动或悬浮元素时非常有用。在这个圆圈悬浮菜单中，可能使用了绝对定位来确保菜单项相对于某个父元素保持位置。 4. **旋转动画**：CSS3的`...
【标题】"CSS循环圆形旋转文字动画.rar"所涉及的知识点主要集中在CSS（层叠样式表）技术上，特别是关于CSS动画和布局的部分。CSS是网页设计中的关键部分，用于控制网页元素的样式、布局和交互效果。在这个案例中，...
7. **定位（Positioning）**：为了将各个花瓣和线条元素准确地放置在页面上，CSS的`position`属性（如`relative`、`absolute`或`fixed`）和`top`、`right`、`bottom`、`left`属性至关重要。 8. **伪元素（Pseudo-...
4. 盒模型和定位：为了正确展示3D球体，需要理解CSS盒模型（content-box、border-box等），以及position（static、relative、absolute、fixed）和transform-origin属性。 5. 视口和透视：在CSS3中，perspective属性...
可以使用CSS的`position`属性（如`absolute`或`fixed`）将提示语定位在按钮旁边，并结合`opacity`和`transform`属性控制其可见性和旋转状态。 总结来说，这个资源提供了一个利用CSS3过渡和动画效果来增强用户界面的...
1. **定位（Positioning）**：使用`position`属性，如`relative`、`absolute`或`fixed`，可以控制行星相对于其父元素的位置，使其能够在预定的空间内旋转。 2. **转动物理（Transforms）**：CSS3的`transform`属性...
4. **CSS3旋转**：通过`transform`属性中的`rotate()`函数，我们可以对元素进行旋转，以创建大括号的倾斜部分。例如，可以对一个矩形元素进行一定角度的旋转，使其看起来像一个打开的大括号。 5. **伪元素**：CSS3...
在网页设计领域，`div+css`是一种常用的技术，用于实现页面布局和样式控制。...对于志峰创业室这样的移动互联网开发API供应商和解决方案提供商来说，掌握这样的技术可以为他们的客户提供更加专业和定制化的服务。
在本资源中，我们关注的是一个使用纯CSS3技术实现的动态效果，即模拟太阳、地球和月亮的旋转。这个效果通常用于展示天体运动的简单模型，或者作为教学工具来帮助理解天文概念。让我们深入探讨一下这个项目背后的CSS3...
标题中的“css3铅笔画圆旋转动画”指的是利用CSS3技术实现的一种视觉效果，它将一个图形（这里可能是铅笔图像）设计成在页面上沿着圆形路径进行旋转的动画。CSS3是层叠样式表的第三版，引入了许多新特性和功能，包括...
本教程将深入探讨“jQuery+CSS3左侧固定导航栏子菜单3d展开动画特效”的实现，这是一种现代化、动态效果丰富的网页导航解决方案。 首先，我们要理解这个特效的核心技术——jQuery和CSS3。jQuery是一个广泛使用的...
在这个特效中，我们可能需要使用`translateX`和`translateY`来改变粒子的位置，以及`rotate`来让粒子旋转，增加立体感。 4. **opacity属性**：控制元素的透明度。在星空效果中，我们可以调整粒子的透明度，模拟星星...
在本项目"CSS3实现蓝色圆形风车旋转特效.zip"中，主要涉及的是前端开发中的CSS3技术，用于创建一个动态的、具有视觉吸引力的蓝色圆形风车旋转效果。这个效果通常会在网页中作为装饰元素或者互动效果使用，能够吸引...
开发者可能使用了`position: absolute`或`position: fixed`来实现元素的相对定位，然后通过调整`top`和`left`属性使其相对于父容器或视口定位。 此外，`index.html`文件可能包含了HTML结构，用于构建圣诞树和其他...
7. **Position属性**：通常设置为`relative`、`absolute`或`fixed`，以实现元素相对于其父元素或浏览器窗口的定位。 8. **Overflow属性**：控制内容溢出元素框的行为，通常设置为`hidden`以隐藏超出旋转木马容器的...
【标题】中的“实用的CSS3 3D旋转垂直手风琴菜单”是一个关于前端网页设计的实践案例，主要利用CSS3的特性实现一个具有3D旋转效果的垂直手风琴菜单。手风琴菜单是一种常见的网页导航元素，它允许用户展开或折叠各个...
例如，使用`::before`和`::after`创建行星的环或卫星，通过`position: absolute`或`position: fixed`进行定位，然后利用`transform`中的`translate`、`rotate`和`scale`来控制元素的位置、旋转和大小，从而模拟行星...
在设计加载图标时，常用`position`属性（如`relative`、`absolute`、`fixed`）来控制元素的位置，确保它们在页面加载期间不会干扰其他内容。 4. SVG图标 SVG（Scalable Vector Graphics）是一种矢量图形格式，常...
【标题】"CSS3紫色的线条花环旋转特效"是一个基于CSS3技术实现的网页动态效果，它将紫色线条编织成一个花环形状，并通过CSS3的动画特性使其旋转，为网页增添视觉吸引力和交互性。 【描述】该特效利用了CSS3的强大...