Question

我刚开始研究一套纯粹的css社交图标。一切都很顺利，但我不能让这个半圈阴影正确旋转。

过渡似乎工作正常，但阴影的定位不正确。这可能是由于它旋转的轴点，但似乎是正确的。没有任何过渡，我可以正确地将阴影对齐，

top: 7px;
right: 15px;

但阴影的父级位于相对位置，应该保持阴影内部没有问题。我也试过顶部，左边5px，因为它有一个5px的边框，但这也没有用。

这是影子的css：

.shadow {
    height: 45px;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 7px;
    right: 15px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}

.shadow:before {
    content: "";
    width: 90px;
    height: 90px;
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
}

.icon:hover .shadow {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    bottom: 7px;
    left: 15px;
}

我的测试运行

使用了顶部，左侧，右侧和底部的阴影：Demo

使用了顶部，左侧，右侧和底部的全套图标：Demo

使用transform-origin：Demo

我知道为什么，在整套图标上，它的转换效果很差，但我不确定如何正确对齐这个阴影。关于如何让这个阴影在图标内正确旋转的任何想法？

Answer 1

您正在使用边距修复应使用变换原点修复的内容

CSS

.shadow {
    height: 45px;
    width: 100%;
    overflow: hidden;
    position: absolute;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    transform-origin: center bottom;
}

.icon:hover .shadow {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

fiddle

我删除了左侧和顶部，并添加了变换原点。这必须在底部，因为你只有半个圆圈，因此圆心位于底部。

Answer 2

漂亮的图标！你非常接近。您只需要从同一侧调整悬停边距。

http://jsfiddle.net/SVHny/7/

.icon:hover .shadow {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    bottom: 7px;
    right: -15px;
}

在社交图标上旋转阴影悬停状态

2 个答案: