0
Mon css est la suivante:La feuille de style ne fonctionne pas avec le lien bootstrap 4 CDN?
li {
-webkit-perspective: 400px;
perspective: 400px;
}
.info {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
width: 100%;
height: 100%;
padding: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 4px;
pointer-events: none;
background-color: rgba(26, 188, 156, 0.9);
}
.in-top .info {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: in-top 300ms ease 0ms 1 forwards;
animation: in-top 300ms ease 0ms 1 forwards;
}
.out-top .info {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: out-top 300ms ease 0ms 1 forwards;
animation: out-top 300ms ease 0ms 1 forwards;
}
@-webkit-keyframes in-top {
from {
-webkit-transform: rotate3d(-1, 0, 0, 90deg);
transform: rotate3d(-1, 0, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-top {
from {
-webkit-transform: rotate3d(-1, 0, 0, 90deg);
transform: rotate3d(-1, 0, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@-webkit-keyframes out-top {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(-1, 0, 0, 104deg);
transform: rotate3d(-1, 0, 0, 104deg);
}
}
@keyframes out-top {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(-1, 0, 0, 104deg);
transform: rotate3d(-1, 0, 0, 104deg);
}
}
les gens disent que je dois ajouter un tag important, mais sans avoir aucune idée où
c'est le html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Direction-aware 3D hover effect (Concept)</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
<header>
<div class='container'>
<h1>Direction-aware hover effect</h1>
<p>CSS & bits of JS</p>
</div>
</header>
<div class='container-fluid'>
<ul>
<li>
<a class='normal' href='#'>
<svg viewBox='0 0 80 76' x='0px' y='0px'>
<g>
<path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
</g>
</svg>
</a>
<div class='info'>
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</body>
</html>
et je voulais im aussi fournissant js
var nodes = document.querySelectorAll('li'),
_nodes = [].slice.call(nodes, 0);
var getDirection = function (ev, obj) {
var w = obj.offsetWidth,
h = obj.offsetHeight,
x = (ev.pageX - obj.offsetLeft - (w/2) * (w > h ? (h/w) : 1)),
y = (ev.pageY - obj.offsetTop - (h/2) * (h > w ? (w/h) : 1)),
d = Math.round(Math.atan2(y, x)/1.57079633 + 5) % 4;
return d;
};
var addClass = function (ev, obj, state) {
var direction = getDirection(ev, obj),
class_suffix = "";
obj.className = "";
switch (direction) {
case 0 : class_suffix = '-top'; break;
case 1 : class_suffix = '-right'; break;
case 2 : class_suffix = '-bottom'; break;
case 3 : class_suffix = '-left'; break;
}
obj.classList.add(state + class_suffix);
};
_nodes.forEach(function (el) {
el.addEventListener('mouseover', function (ev) {
addClass(ev, this, 'in');
}, false);
el.addEventListener('mouseout', function (ev) {
addClass(ev, this, 'out');
}, false);
});
Javascript fonctionne bien le long côté mon bootstrap cdn mais mon fichier css semble être surchargé par défaut bootstrap cdn, besoin d'aide pour ajouter le tag! important à mon fichier css.
J'ai essayé presque tous les événements possibles, mais aucune aide
Si vous pouvez me aider est que ce serait vraiment utile
guyz vous plaît besoin d'une aide sérieuse !!!
'important' peut utiliser comme ceci:' li { -webkit-perspective: 400px! Important; perspective: 400px! Important; –