123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
  <div class="fixed">
    <div>I have <code>position: fixed;</code></div>
    
    <button class="toggle">Toggle translate3d on container</button>
  </div>
  <!-- the rest is just lorem ipsum -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Partim cursu et peragratione laetantur, congregatione aliae coetum quodam modo civitatis imitantur; Quorum sine causa fieri nihil putandum est. An quod ita callida est, ut optime possit architectari voluptates? Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? </p>
  <p>Aliter enim nosmet ipsos nosse non possumus. Consequens enim est et post oritur, ut dixi. Reguli reiciendam; Illa videamus, quae a te de amicitia dicta sunt. Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur. Nemo nostrum istius generis asotos iucunde putat vivere. Certe, nisi voluptatem tanti aestimaretis. Quasi ego id curem, quid ille aiat aut neget. Iam id ipsum absurdum, maximum malum neglegi. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Sed quanta sit alias, nunc tantum possitne esse tanta. Haec quo modo conveniant, non sane intellego. </p>
  <p>Quo plebiscito decreta a senatu est consuli quaestio Cn. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Sin laboramus, quis est, qui alienae modum statuat industriae? Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. Itaque hic ipse iam pridem est reiectus; Proclivi currit oratio. Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. </p>
  <p>Polycratem Samium felicem appellabant. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; Nunc haec primum fortasse audientis servire debemus. Aeque enim contingit omnibus fidibus, ut incontentae sint. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. </p>
  <p>Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Haec para/doca illi, nos admirabilia dicamus. Quid, cum fictas fabulas, e quibus utilitas nulla elici potest, cum voluptate legimus? An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? An hoc usque quaque, aliter in vita? Respondent extrema primis, media utrisque, omnia omnibus. Sed quanta sit alias, nunc tantum possitne esse tanta. Rationis enim perfectio est virtus; Quae quidem sapientes sequuntur duce natura tamquam videntes; </p>
  <p>Sic enim censent, oportunitatis esse beate vivere. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Atqui haec patefactio quasi rerum opertarum, cum quid quidque sit aperitur, definitio est. Itaque rursus eadem ratione, qua sum paulo ante usus, haerebitis. </p>
  <p>Ut in geometria, prima si dederis, danda sunt omnia. Illis videtur, qui illud non dubitant bonum dicere -; Expectoque quid ad id, quod quaerebam, respondeas. Nam ista vestra: Si gravis, brevis; An eiusdem modi? Consequens enim est et post oritur, ut dixi. Quid ergo? Theophrastus mediocriterne delectat, cum tractat locos ab Aristotele ante tractatos? Quod quidem iam fit etiam in Academia. </p>
  <p>Ac tamen hic mallet non dolere. Hoc est non modo cor non habere, sed ne palatum quidem. Vide, quantum, inquam, fallare, Torquate. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Sed finge non solum callidum eum, qui aliquid improbe faciat, verum etiam praepotentem, ut M. </p>
  <p>Universa enim illorum ratione cum tota vestra confligendum puto. Memini vero, inquam; Verba tu fingas et ea dicas, quae non sentias? Duo Reges: constructio interrete. Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Eam tum adesse, cum dolor omnis absit; Ut in voluptate sit, qui epuletur, in dolore, qui torqueatur. </p>
  <p>Aut haec tibi, Torquate, sunt vituperanda aut patrocinium voluptatis repudiandum. Ita fit beatae vitae domina fortuna, quam Epicurus ait exiguam intervenire sapienti. Mihi enim satis est, ipsis non satis. Restinguet citius, si ardentem acceperit. Tu vero, inquam, ducas licet, si sequetur; Itaque contra est, ac dicitis; </p>
  <p>Prave, nequiter, turpiter cenabat; Non semper, inquam; Sed mehercule pergrata mihi oratio tua. Theophrastus mediocriterne delectat, cum tractat locos ab Aristotele ante tractatos? Ergo opifex plus sibi proponet ad formarum quam civis excellens ad factorum pulchritudinem? Iam enim adesse poterit. Ita nemo beato beatior. Itaque his sapiens semper vacabit. Quid enim de amicitia statueris utilitatis causa expetenda vides. Poterat autem inpune; </p>
  <p>Dulce amarum, leve asperum, prope longe, stare movere, quadratum rotundum. Bonum patria: miserum exilium. Nihil opus est exemplis hoc facere longius. Minime vero istorum quidem, inquit. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Illa videamus, quae a te de amicitia dicta sunt. </p>
  <p>Quae similitudo in genere etiam humano apparet. Iam id ipsum absurdum, maximum malum neglegi. Iam illud quale tandem est, bona praeterita non effluere sapienti, mala meminisse non oportere? Quamquam te quidem video minime esse deterritum. Nam illud quidem adduci vix possum, ut ea, quae senserit ille, tibi non vera videantur. Avaritiamne minuis? </p>
  <p>Istam voluptatem, inquit, Epicurus ignorat? Sed haec nihil sane ad rem; Si longus, levis; Quae cum dixisset paulumque institisset, Quid est? Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia? </p>
  <p>Hic nihil fuit, quod quaereremus. Itaque et manendi in vita et migrandi ratio omnis iis rebus, quas supra dixi, metienda. Nunc haec primum fortasse audientis servire debemus. Summum ením bonum exposuit vacuitatem doloris; Itaque rursus eadem ratione, qua sum paulo ante usus, haerebitis. Sed tamen intellego quid velit. Odium autem et invidiam facile vitabis. Mene ergo et Triarium dignos existimas, apud quos turpiter loquare? </p>
  <p>Non autem hoc: igitur ne illud quidem. Si autem id non concedatur, non continuo vita beata tollitur. Hanc ergo intuens debet institutum illud quasi signum absolvere. Quae duo sunt, unum facit. Ut in geometria, prima si dederis, danda sunt omnia. Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur. Quid nunc honeste dicit? Quo modo autem philosophus loquitur? </p>
  <p>Maximas vero virtutes iacere omnis necesse est voluptate dominante. Idemne potest esse dies saepius, qui semel fuit? Duae sunt enim res quoque, ne tu verba solum putes. An hoc usque quaque, aliter in vita? Quodcumque in mentem incideret, et quodcumque tamquam occurreret. Eam tum adesse, cum dolor omnis absit; Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur. Utilitatis causa amicitia est quaesita. </p>
  <p>Quid de Platone aut de Democrito loquar? Quis istud possit, inquit, negare? Quae tamen a te agetur non melior, quam illae sunt, quas interdum optines. Ut in geometria, prima si dederis, danda sunt omnia. Est enim effectrix multarum et magnarum voluptatum. </p>
  <p>Quid enim de amicitia statueris utilitatis causa expetenda vides. Haec para/doca illi, nos admirabilia dicamus. A mene tu? Si id dicis, vicimus. A quibus propter discendi cupiditatem videmus ultimas terras esse peragratas. Non quam nostram quidem, inquit Pomponius iocans; Beatus autem esse in maximarum rerum timore nemo potest. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Rhetorice igitur, inquam, nos mavis quam dialectice disputare? </p>
  <p>Illa videamus, quae a te de amicitia dicta sunt. Teneo, inquit, finem illi videri nihil dolere. Quo tandem modo? Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; </p>
</div>
            
          
!
            
              * {
  box-sizing: border-box;
}

.fixed {
  position: fixed;
  background: grey;
  top: 0;
  right: 0;
  padding: 20px;
  
  &:before {
    font-weight: bold;
    content: '[No Transform]';
  }

  .transform & {  
    &:before {
      content: '[Transform applied]';
    }
  }
}

.container {
  padding: 20px;
  
  &.transform {
    transform: translate3d(0,0,0);
  }
}

p {
  margin-top: 0;
}
            
          
!
            
              $('.toggle').click(function() {
  $('.container').toggleClass('transform');
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console